[React] 상태 업데이트 로직을 컴포넌트와 분리할 수 있는 useReducer()

1. useReducer()

상태를 업데이트할 때 useState()를 주로 사용했는데 useReducer()로도 상태 업데이트가 가능하다.
useReducer()를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.

우선 reducer는 현재 상태와 액션 객체를 파라미터로 받아와 새로운 상태를 반환해주는 함수이다.

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

reducer에서 반환되는 상태는 컴포넌트가 지닐 새로운 상태이다.
여기서 action은 업데이트를 위한 정보를 가지고 있다.
action의 예시는 아래 코드를 참고하면 좋을 것 같다.

// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}

// 카운터에 1을 빼는 액션
{
  type: 'DECREMENT'
}

// input값을 바꾸는 액션
{
  type: 'CHANGE_INPUT',
  key: 'email',
  value: 'dohee@naver.com'
}

// 새 할 일을 등록하는 액션
{
  type: 'ADD_TODO'
  todo: {
    id: 1,
    text: ‘조깅하기’,
    done: false,
  }
}

reducer를 알았으니 useReducer()의 사용법을 알아보자.

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

1️⃣ state : 컴포넌트에서 사용할 수 있는 상태
2️⃣ dispatch : 액션을 발생시키는 함수, dispatch({ type: ‘INCREMENT’ })

useReducer()의 사용법을 알았으니 useState()만 사용한 예시와 useReducer()를 사용한 예시를 비교해보자.

📍useState() 사용한 예시

import { useState } from 'react';

function Counter() {
  const [num, setNum] = useState(0);
  
  const plusBtnClickHandler = () => {setNum(prev => prev + 1)};
  const minusBtnClickHandler = () => {setNum(prev => prev - 1)};
  
  return (
    <>
      <p>{num}</p>
      <button type='button' onClick={plusBtnClickHandler}>+1</button>
      <button type='button' onClick={minusBtnClickHandler}-1</button>
    </>
  );
}

export default Counter;

📍useReducer() 사용한 예시

import { useReducer } from ‘react’;

const reducer = (state, action) => {
  switch (action.type) {
    case ‘INCREMENT’:
      return state + 1;
    case ‘DECREMENT’:
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [num, dispatch] = useReducer(reducer, 0);
  
  const plusBtnClickHandler = () => {dispatch({ type: ‘INCREMENT’ })};
  const minusBtnClickHandler = () => {dispatch({ type: ‘DECREMENT’ })};
  
  return (
    <>
      <p>{num}</p>
      <button type=‘button’ onClick={plusBtnClickHandler}>+1</button>
      <button type=‘button’ onClick={minusBtnClickHandler}>-1</button>
    </>
  );
}

export default Counter;

위 예시를 보면 dispatch를 통해 액션을 발생시켜 지정한 type의 일을 수행하는 것을 알 수 있다.