[React] useReducer

useReducer를 사용하면 여러개의 state를 하나의 state와 하나의 setState로 통일 가능

import React, { useReducer } from 'react';

const initalState = {
  aState: '',
  bState: 0,
  cState: [1, 2, 3],
};

const SET_ASTATE = 'SET_ASTATE';
const SET_BSTATE = 'SET_BSTATE';
const SET_CSTATE = 'SET_CSTATE';

const reducer = (state, action) => {
  switch (action.type) {
    case SET_ASTATE: {
      return {
        ...state,
        aState: action.aState,
      };
    },
    case SET_BSTATE: {
      return {
        ...state,
        bState: state.bState === 'T' ? 'O' : 'X',
      };
    },
    case SET_CSTATE: {
      const cState = [...state.cState];
      cState[0] = 'A';
      return {
        ...state,
        cState,
      };
    }
  }
};

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

const xFunc = () => {
  const yFunc = () => {
    dispatch({ type: SET_ASTATE, aState: 'T' });
  }

  return <div> {state.aState} </div>
}

이벤트를 통해서 action을 dispatch할 때마다 reducer가 실행됨

initialState - state 정의, 초기화

reducer - type에 해당하는 switch문 코드 실행,  action에서 dispatch에 넣었던 값이 포함됨

 

 

해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.