(컴포넌트 분리 및 props) es modules may not assign module.exports or exports.*, use esm export syntax, instead: ./numberbaseball.jsx 문제 해결

출처: https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의

 

* (웹팩 사용) 강의 내 "숫자야구 3-3"에서 문제 발생

▶ import과 require 사용에서 문제 발생

▶ 노드 내에서는 require만 되나, 바벨이 import문을 const로 바꿔주기 때문에 바벨이 설치되어 있다면 둘 다 섞어서 사용이 가능함

▶ 계속 문제 발생할 경우 웹팩 다시 설치 후 진행 권장 https://ba-gotocode131.tistory.com/233

[웹 게임을 만들며 배우는 React] - Hoonks, 웹팩

 

 

* 제목처럼 문제 발생 시 client.jsx, NumberBaseballClass.jsx, Try.jsx  확인할 것 

 

▶ import "이름" from "위치" 

import NumberBaseballClass from "./NumberBaseballClass";

export default NumberBaseballClass;

 

▶ const  "이름" from "위치"

const NumberBaseball = require("./NumberBaseballClass")

module.exports = NumberBaseballClass;

 

 

* client.jsx

const React = require("react");
import { createRoot } from "react-dom/client";
// const NumberBaseball = require("./NumberBaseballClass");
import NumberBaseballClass from "./NumberBaseballClass";

createRoot(document.getElementById("root")).render(<NumberBaseballClass />);

 

 

* NumberBaseballClass.jsx

import React, { Component, createRef } from "react";
import Try from "./Try";

function getNumber() {}

class NumberBaseballClass extends Component {
  state = {
    result: "",
    value: "",
    answer: getNumber(),
    tries: [],
  };

  onSubmitForm = () => {};
  onChangeInput = () => {};
  fruits = [
    { fruit: "사과", taste: "맛있다" },
    { fruit: "배", taste: "맛없다" },
    { fruit: "토마토", taste: "시다" },
    { fruit: "포도", taste: "새콤하다" },
    { fruit: "감", taste: "떫다" },
    { fruit: "귤", taste: "달다" },
  ];

  render() {
    return (
      <>
        <h1>{this.state.result}</h1>
        <form onSubmit={this.onSubmitForm}>
          <input
            maxLength={4}
            value={this.state.value}
            onChange={this.onChangeInput}
          />
        </form>
        <div>시도: {this.state.tries.length}</div>
        <ul>
          {this.fruits.map((v, i) => {
            return <Try />;
          })}
        </ul>
      </>
    );
  }
}

export default NumberBaseballClass;

//client.jsx에서 const NumberBaseball = require("./NumberBaseballClass"); 사용 시
// module.exports = NumberBaseballClass;

 

 

Try.jsx  

import React, { Component, createRef } from "react";

class Try extends Component {
  render() {
    return (
      <li>
        <b>{v.fruit}</b> - {i}
      </li>
    );
  }
}
export default Try;

 

 

* Props 사용 이유 : 분리된 컴포넌트 연결고리를 만들어야 하기 때문

▶위의 Try.jsx와 NumberBaseballClass.jsx 에서 오류 발생("v"와 "i"값 찾지 못함)

▶Try 안에 v와 i가 찾을 수 있는 연결고리 필요

 

 

* NumberBaseballClass.jsx

	<ul>
          {this.fruits.map((v, i) => {
            return <Try value={v} index={i} />;
          })}
        </ul>

 

 

* Try.jsx

  	<li>
        <b>{this.props.value.fruit}</b> - {this.props.index}
    </li>

 

 

* 사용자가 만든 메서드들은 화살표함수를 사용
- 안쓰면 constructor를 사용해야 함

- 메서드 안에서 this 사용 불가