220317 TIL - markdown ver.

React.js

Today I Learned ... react.js

🙋‍♂️React.js Lecture

🙋‍My Dev Blog

---

🚀 예제 - 끝말잇기 게임

WordRelay.jsx

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

class WordRelay extends Component {
  state = {
    word: "강아지",
    value: "",
    result: "",
  };

  onSubmitForm = e => {
    e.preventDefault();
    if (this.state.value[0] === this.state.word[this.state.word.length - 1]) {
      this.setState(prevState => ({
        result: "정답입니다.",
        value: "",
        word: prevState.value,
      }));
      this.input.focus();
    } else {
      this.setState({
        result: "틀렸습니다.",
        value: "",
      });
      this.input.focus();
    }
  };

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

  input;
  onRefInput = el => {
    this.input = el;
  };

  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;  

Hooks 이용시

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

const WordRelay = () => {
  const [word, setWord] = useState("강아지");
  const [value, setValue] = useState("");
  const [result, setResult] = useState("");

  let inputRef = useRef(null);

  const onSubmitForm = e => {
    e.preventDefault();
    if (value[0] === word[word.length - 1]) {
      setResult("정답입니다");
      setWord(value); 
      setValue("");
      inputRef.current.focus();
    } else {
      setResult("틀렸습니다");
      setValue("");
      inputRef.current.focus();
    }
  };

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

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

module.exports = WordRelay;

💡 target VS currentTarget

target	currentTarget
타겟	현재 이벤트핸들러가 부착된 타겟

💡 콜백 ref VS React.useRef

// 1️⃣ Callback ref

 <input ref={this.onRefInput} />

inputRef = null;              
onRefInput = ( el => inputRef = el);



// 2️⃣ React.useRef

 <input ref={inputRef} />

 const inputRef = React.useRef(null);

webpack build 자동으로 하는 방법

매번 수정할 때 마다$ npx webpack 하기 번거로우므로
webpack을 자동으로 build하는 설정을 해주자.

** webpack Dev-server / Hot-Reloading**

1. npm i 명령어를 터미널에 입력해서 react-refresh와,

pmmmwh/react-refresh-webpack-plugin을 설치해준다.
$ npm install react-refresh @pmmmwh/react-refresh-webpack-plugin -D

2. 추가로 webpack Dev-server도 필요하다.
   $ npm install -D webpack-dev-server

• package.json

package.json의 scripts 부분을 수정해준다.

변경 전 : "dev": "webpack"
변경 후 : "dev": "webpack serve --env development

 "scripts": {
    "dev": "webpack serve --env development"
  },

webpack.config.js

const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

// 생략
  module: {
    ...
  },

  plugins: [
    new RefreshWebpackPlugin()
  ],

  output: {
    ...
  }

우선, @pmmmwh 플러그인을 require로 불러와서 변수로 저장한 후,
plugins에 new 변수명()을 해준다.

module: {
    rules: [
      {
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: [
            "@babel/plugin-proposal-class-properties",
            "react-refresh/babel",
          ],
        },
      },
    ],
  },

이부분도 babel-loader의 설정에 - plugins에 - "react-refresh/babel"을 추가한다.

🌍 dev-server 설정

output: {
    path: path.join(__dirname, "dist"), //__dirname은 현재폴더경로
    filename: "app.js",
    publicPath: "/dist/",
  },

  devServer: {
    publicPath: "/dist/",
    hot: true,
  },

devServer의 설정은 위와 같이
output의 publicPath를 그대로 가져온 후, hot: true라고 적어준다.

🔻 계속 dev-server 설정이 오류나서 한참 헤맸다.
나의 삽질 후기가 궁금하다면 아래 포스팅으로 😂

😥dev-server 설정 에러

바뀐 부분

 output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",  // app.js에서 [name]으로
    publicPath: "/dist",  
  },

 devServer: {
    devMiddleware: { publicPath: "/dist" }, 
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },