component로 작성하기

필요파일

1. dist 폴더 ( webpack을 통해 app.js가 만들어진다 )
2. client.jsx - 여러 jsx파일 모으는역할
3. package.json
4. package-lock.json
5. webpack.config.js - webpack 동작 과정 시 설정 내용
6. WordRelay.jsx - 끝말잇기 동작을 위한 코드
7. index.html - webpack을 통해 만들어진 파일을 사용할 html 파일

client.jsx

const React = require("react");
const ReactDom = require("react-dom");

const WordRelay = require("./WordRelay");

ReactDom.render(<WordRelay />, document.querySelector("#root"));

/*
const React = require("react"); 대신에 import React from "react"; 로 사용해도 될까요?
=> 되는데 웹팩 설정 하셔야 합니다.
*/

package.json

...
  "scripts": {
    "dev": "webpack",
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "webpack": "^5.62.1",
    "webpack-cli": "^4.9.1"
  }
...

webpack.config.js

//node에서 경로를 쉽게 조작
const path = require("path");

module.exports = {
  name: "word-relay-setting",
  mode: "development", //실서비스 : production
  devtool: "eval",

  resolve: {
    extensions: [".js", ".jsx"], //알아서 웹팩이 js와 jsx를 찾아서 만들어준다
  },

  //중요
  entry: {
    app: ["./client"], //client.jsx에서 WordRelay.jsx가 있어서 따로 적을 필요 X
  }, //입력

  module: {
    rules: [
      {
        test: /\.jsx?/, //js나 jsx파일에 어떤 rule을 적용한다.
        loader: "babel-loader", // 옛날 브라우저에서도 호환되게
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    ],
  },

  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
  }, //출력
};

1. class component로 작성하기

WordRelay.jsx

const React = require("react");
const { Component } = React;

class WordRelay extends Component {
  state = {
    word: "제로초",
    value: "",
    result: "",
  };

  onSubmitForm = (e) => {
    e.preventDefault();
    console.log(this.state, this.state.value);
    if (this.state.word[this.state.word.length - 1] === this.state.value[0]) {
      this.setState({
        result: "딩동댕",
        word: this.state.value,
        value: "",
      });
      this.input.focus();
    } else {
      this.setState({
        result: "땡",
        value: "",
      });
      this.input.focus();
    }
  };

  onChangeInput = (e) => {
    console.log(e.target.value);
    this.setState({ value: e.target.value });
  };

  onRefInput = (c) => {
    this.input = c;
  };

  render() {
    return (
      <>
        <div>{this.state.word}</div>
        <form onSubmit={this.onSubmitForm}>
          <input
            ref={this.onRefInput}
            value={this.state.value}
            onChange={this.onChangeInput}
          />
          <button>입력!</button>
        </form>
        <div>{this.state.result}</div>
      </>
    );
  }
}

module.exports = WordRelay;

실행하기

• npm run dev 명령어 실행

실행결과

• 첫화면
  

• 성공 시
  

• 실패 시

2. functional component로 작성하기

WordRelay.jsx

const React = require("react");
const { useState, useRef } = React;

const WordRelay = () => {
  const [word, setWord] = useState("제로초");
  const [value, setValue] = useState("");
  const [result, setResult] = useState("");
  const ref = useRef("null");

  const onSubmitForm = (e) => {
    e.preventDefault();
    if (word[word.length - 1] === value[0]) {
      setResult("딩동댕");
      setWord(value);
      setValue("");
      ref.current.focus();
    } else {
      setResult("땡");
      setValue("");
      ref.current.focus();
    }
  };

  const onChangeInput = (e) => {
    setValue(e.target.value);
  };

  const onRefInput = (c) => {
    ref = c;
  };

  return (
    <>
      <div>{word}</div>
      <form onSubmit={onSubmitForm}>
        <input ref={ref} value={value} onChange={onChangeInput} />
        <button>입력!</button>
      </form>
      <div>{result}</div>
    </>
  );
};

module.exports = WordRelay;

실행하기

• npm run dev 명령어 실행

마찬가지의 결과이다.

import export / require

require : node의 모듈 시스템 (CommonJS 키워드)
import export : ES6 모듈 시스템
( 가독성이 좋습니다. 또한 비동기 방식으로 작동하고 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리한 측면 )

위의 코드 수정하기

client.jsx

import React from "react";
import ReactDom from "react-dom";
import WordRelay from "./WordRelay.jsx";

ReactDom.render(<WordRelay />, document.querySelector("#root"));

WordRelay.jsx

import React, { Component } from "react";		//class일때
import React, { useState, useRef } from "react";	//function일때 


...


export default WordRelay;	

이와같이 수정하면 된다.
기존의 module.exports = WordRelay; => export default WordRelay;

const React = require("react");
const ReactDom = require("react-dom");
const WordRelay = require("./WordRelay");

위의 내용이

import React from "react";
import ReactDom from "react-dom";
import WordRelay from "./WordRelay.jsx";

이렇게 바뀌었다.

해당 import export가 가능한 것은 export를 babel-loader를 사용하기 때문이다.
=> babel로 인해서 react에서의 jsx와 ES6의 import export를 webpack에 이용할 수 있다.