React Study [#7] - 틱택토

제로초님의 "웹 게임을 만들며 배우는 React"을 보고 학습하는 스터디 입니다.

useRedcuer

useRedcuer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있지요.

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

const SET_WINNER = "SET_WINNER";

const reducer = (state, action) => {
    // action을 dispatch할 때마다 reducer 실행한다.
    switch (action.type) {
        // 액션 구분
        case 'SET_WINNER': 
        return {
            // 새로운 객체 생성 및 바뀐 값만
            ...state, // 얕은 복사
            winner: action.winner,
        };
        default:
    }
};

{...}

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