useReducer

state 갯수를 줄이는 useReducer... 하나의 state, 하나의 setState로 통합하여 관리할 수 있다.

useReducer 적용하기

1. useReducer를 하면 아래와 같은 포맷이 딱 잡힌다. (요건 컴포넌트 안에서)

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

2. reducer와 initialState를 각각 만든다. (컴포넌트 밖에다가 만든다!!)

3. 먼저 initialState 부터. 기존 state의 값들을 아래의 객체 안에 몽땅 넣어 놓는다. 이렇게 넣어놓은 state 값들은 state.winner 와 같이 접근할 수 있다.

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

4. 그리고 reducer를 만든다. reducer는 2개의 인자를 함수다. 이 안에 위의 state 값들을 어떻게 바꿀지 적는다. 일단 아래처럼만 만들자

const reducer = (state, action) => {
  
};

5. state 값을 변경할 때 1번에서의 dispatch를 활용한다. dispatch에 전달되는 객체를 'action'이라고 부른다. 이 'action'을 dispatch 할 때마다 4번의 reducer가 실행된다.

   다만 dispatch는 비동기적으로 실행되기 때문에 첫번째 dispatch의 액션이 완료하기 전에 두번째 dispatch의 처리가 먼저 끝날 수도 있다.

const onClickTable = useCallback(() => {
  // state를 변경할 코드를 작성하고 싶은 곳에 이렇게 dispatch를 사용하면 된다.
  dispatch({ type: "SET_WINNER", winner: "O" });
  dispatch({ type: "SET_TURN", turn: "X" });
}, []);

6. 위에서 dispatch된 action들을 아래와 같이 reducer 함수에서 각각 처리할 수 있다.

const reducer = (state, action) => {
  switch(action.type) {
    case 'SET_WINNER':
      // action.type이 'SET_WINNER'면
      return {
        // state를 어떻게 변경할 지 이곳에서 작성.
        // 주의! state.winner = action.winner 이렇게 직접 바꾸면 안된다.
        // 아래처럼 새로운 객체로 다시 만들어서, 바뀌는 값만 새로 업데이트!
        ...state, // 여기서 새로운 객체로 복사하는 것. 기존 state가 들어가고,
        winner: action.winner, // 바뀔 부분은 여기서 업데이트.
      }
    default:
      return state;
  }  
};

참고) useReducer 기본 틀

import React, {useReducer} from "react";

const initialState = {
  //state들의 초기화를 여기서...
}

const reducer = (state, action) => {
  switch (action.type) {  
    default:
      return state;
  }
}


const Box = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <div>this is box</div>
  );
};

export default Box;