[React] useState와 useReducer

useState와 useReducer 모두 리액트 상태 관리 방법이다. 그렇다면 왜 굳이 useState를 두고 useReducer를 추가로 사용하는 것일까?

[useReducer의 장점]

- 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있다.

   -> 여러 컴포넌트에서 재사용이 가능하다.

   -> 컴포넌트와 상태 관리를 분리해서 관리가 가능하다.

   -> 한 번 작성하고 여러 군데서 가져다가 쓸 수 있기 때문에 useState를 여러번 쓰지 않아도 된다.

   -> 데이터 상태 관리 포인트가 한군데라 유지 보수가 용이하다.

 

그렇다면 무조건 useReducer를 쓰는게 이득일까?

아니다. 하나의 컴포넌트에서만 쓰는 값이 있다면 useState가 적절하며, 여러군데에서 쓰이는 값이라면 useReducer가 적절하다. 적당히 두 상태 관리 방법을 섞어서 쓰면 된다.

 

[예시를 통해 보는 useReducer 사용법]

reducer 정의: function reducer(상태 관리 대상 변수, 실행할 액션명) {}

      - 인자로 들어오는 액션명을 통해서 reducer 함수 내부에서 분기처리 되어 값을 변경한다.

reducer 사용: const [상태 관리 대상 변수, dispatch] = useReducer(리듀서 함수, 초기값);

import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });

  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}

 

 

 

코드 출처: React 공식 문서 https://react.dev/reference/react/useReducer