[리액트] useReducer

useState가 React에서 가장 기본적인 상태 관리 도구라면, useReducer는 좀 더 복잡한 상태 로직을 관리할 때 유용하다. 전역 상태 관리에는 Context API나 Redux도 많이 쓰이지만, useReducer도 그에 못지않게 중요한 역할을 한다.

useReducer란?

useReducer는 React에서 제공하는 하나의 훅으로, 액션 객체를 디스패치해 상태를 업데이트하는 방식으로 동작한다. 기본 형태는 다음과 같다.

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

• state: 현재 상태
• dispatch: 액션을 발생시키는 함수
• reducer: reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.
• initialState: 초기 상태

왜 useReducer를 쓰는가?

1. 복잡한 상태 로직 관리
2. 읽기 쉬운 코드 구조
3. 재사용 가능한 로직

예시

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1 ;
    default:
      return state;
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, 0 );

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
    </div>
  );
}

useReducer와 Context API를 활용한 전역 상태 관리

1. Context와 Reducer 생성

import { createContext, useReducer } from "react";

export const CountContext = createContext();

const initialState = 0;

function countReducer(state, action) {
  if (action.type === "INCREMENT") {
    return action.payload;
  }
  return state;
}

export function CountProvider({ children }) {
  const [count, dispatch] = useReducer(countReducer, initialState);

  return (
    <CountContext.Provider value={{ count, dispatch }}>
      {children}
    </CountContext.Provider>
  );
}

2. 컴포넌트에서 사용하기

import { useContext } from "react";
import { CountProvider, CountContext } from "./store/CountContext";

export default function App() {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
}

function Counter() {
  const { count, dispatch } = useContext(CountContext);

  return (
    <div>
      <p>{count}</p>
      <button
        onClick={() => dispatch({ type: "INCREMENT", payload: count + 1 })}
      >
        증가
      </button>
    </div>
  );
}

여기서 CountProvider는 전역 상태를 제공하고, Counter 컴포넌트에서는 그 상태를 사용하고 있다.

이렇게 하면 INCREMENT 액션을 디스패치할 때 payload를 통해 새로운 count 값을 전달할 수 있다.