활동 계획

• 리액트 강의 수강
• 틱택토 게임 만들기

활동 내용

7-1 틱택토와 useReducer 소개

const [winner, setWinner] = useState("");
    const [turn, setTurn] = useState("0");
    const [tableData, setTableData] = useState([
      ["", "", ""],
      ["", "", ""],
      ["", "", ""],
    ]);

위의 긴 코드를 useReducer을 이용해 짧게 줄일 수 있음

7-2 reducer, action, dispatch의 관계

reducer은 액션을 dispatch할 때 마다 reducer이 실행되어 state를 바

return {
        ...state,
        winner: action.winner,
      };

…state: 기존 state를 바꾸는게 아니라 새 state를 만들어서 변화

const initialState = {
  winner: "",
  turn: "0",
  tableData: [
    ["", "", ""],
    ["", "", ""],
    ["", "", ""],
  ],
};

const reducer = (state, action) => {
  switch (action.type) {
    case "SET_WINNER":
      return {
        ...state,
        winner: action.winner,
      };
  }
};

const TicTacToe = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const onClickTable = useCallback(() => {
    dispatch({ type: "SET_WINNER", winner: "0" });
  });

state를 수정하고 싶으면 action을 만들고 dispatch로 실행해야함. 이 dispatch는 reducer이 기록

7-3 action 만들어 dispatch 하기

import React, { useReducer, useState, useCallback } from "react";
import Table from "./Table";

const initialState = {
  winner: "",
  turn: "0",
  tableData: [
    ["", "", ""],
    ["", "", ""],
    ["", "", ""],
  ],
};

const SET_WINNER = "SET_WINNER";

const reducer = (state, action) => {
  switch (action.type) {
    case "SET_WINNER":
      return {
        ...state,
        winner: action.winner,
      };
  }
};

const TicTacToe = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const onClickTable = useCallback(() => {
    dispatch({ type: "SET_WINNER", winner: "0" });
  }, []);

  return (
    <>
      <Table onClick={onClickTable} tableData={state.tableData} />
      {winner && <div>{winner}님의 승리</div>}
    </>
  );
};

export default TicTacToe;