React 01 - Week3

GuGuDan을 webpack까지 이용해서 사용하기

1. npm, 패키지 설치

npm init -> name, author, license만 설정

npm i react react-dom

npm i -D webpack webpack-cli

npm i -D @babel/core

npm i -D @babel/preset-env

npm i -D @babel/preset-react

npm i -D babel-loader

-> webpack 만들기

webpack.config.js

 

```

const path = require("path");

module.exports = {

  name: "GuGuDan-setting",

  mode: "development",

  devtool: "eval",

  resolve: {

    extensions: [".js", ".jsx"],

  },

  entry: {

    app: ["./client"],

  },

  module: {

    rules: [

      {

        test: /\.jsx?/,

        loader: "babel-loader",

        options: {

          presets: ["@babel/preset-env", "@babel/preset-react"],

        },

      },

    ],

  },

  output: {

    path: path.join(__dirname, "dist"),

    filename: "app.js",

  },

};

```

 

2. 컴포넌트 만들기

 

```

const React = require("react");

const { useRef, useState } = require("react"); // 구조분해문법

const GuGuDan = () => {

  const [first, setFirst] = useState(Math.ceil(Math.random() * 9));

  const [second, setSecond] = useState(Math.ceil(Math.random() * 9));

  const [value, setValue] = useState("");

  const [result, setResult] = useState("");

  const inputRef = useRef(null);

  const onChange = (e) => {

    setValue(e.target.value);

  };

  const onSubmit = (e) => {

    e.preventDefault();

    if (parseInt(value) === first * second) {

      setResult(() => {

        return "정답" + value;

      });

      setFirst(Math.ceil(Math.random() * 9));

      setSecond(Math.ceil(Math.random() * 9));

      setValue("");

      inputRef.current.focus();

    } else {

      setResult("꽝");

      setValue("");

      inputRef.current.focus();

    }

  };

  return (

    <>

      <div>

        {first} x {second} 의 답은?

      </div>

      <form onSubmit={onSubmit}>

        <input type="number" ref={inputRef} value={value} onChange={onChange} />

        <button>제출</button>

      </form>

      <div id="result">{result}</div>

    </>

  );

};

module.exports = GuGuDan;

```

 

3. client 만들기

```

const React = require("react");

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

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

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

```