React - useReducer

• 참고자료

useReducer?

• Redux의 핵심이였던 reducer를 채용한 react API
• useState처럼 state를 관리함.
• State를 반복적으로 생성하는 것을 방지하기 위해 사용되며 보다 복잡한 state를 관리하기 위해 사용된다.

useReducer의 구성

1. useReducer의 선언

const [good, dispatch] = useReducer(reducer, initialValue);

• good은 state의 이름, 자유롭게 수정 가능
• dispatch는 이후에 설명할 action 객체를 구성하는 메서드
• reducer는 함수. action의 요청사항대로 state를 변경해준다.
• initialValue는 state good의 초기값 변수에 따로 할당해주는 것이 편하다.

2. dispatch의 사용

입출금 예제
const onClickEvent = () => {
  if(true){
    dispatch({
    type: deposit,
    payload: value, 
  });
} else {
  dispatch({
    type: withdraw, 
    payload: value,  
  });  
}

• dispatch는 action 객체를 구성하는 key,value를 작성할 수 있다.
• good state는 reducer에 의해서만 수정이 가능하고 reducer를 실행시키기 위해선 dispatch를 호출해야만 한다.
• 다양한 상황에서 실행시키기 위해 요청을 구분할 수 있는 type
• 이외에는 상황에 맞게 key,value를 자유롭게 추가해주면 된다. (payload는 예시)
• value 또한 state를 넣어도 되고 다른 변수 할당 또는 값을 직접 입력해도 된다.

3. reducer

예제
const reducer = (state, action) => {
  switch (action.type){
    case ACTION_TYPES.deposit:
    return state + action.payload
    case ACTION_TYPES.withdraw:
      return state + action.payload
    default:
      return state;
  }
  return state + action.payload
};

• reducer는 함수로 작성하며, state와 action을 매개변수로 받는다.
  • state : 위에서 작성한 good state의 값
  • action : dispatch에서 작성한 action 객체
• 요청을 구분하기 위해 switch문이 주로 작성되며, 요청 구분에는 aciton.type value를 이용한다.
• return 값에는 state가 어떻게 변경되는지 실질적인 action를 작성하면 된다.
• 추가적으로 return에서는 state에 값을 직접적으로 재할당하면 안되고 spread operator를 이용해서 값을 변경해준다.
• 아래 예제 참고

const reducer = (state, action) => {
  switch (action.type) {
    case SET_WINNER:
      return {
        ...state,
        winner: action.winner,
      };
    case CLICK_CELL:
      const tableData = [...state.tableData];
      tableData[action.row] = [...tableData[action.row]];
      tableData[action.row][action.cell] = state.turn;
      return {
        ...state,
        tableData,
      };
  }
};

기타 정보

action.type은 constance로 따로 할당해서 사용

const ACTION_TYPES = {
  deposit: 'deposit', 
  withdraw: 'withdraw',
}