useReducer

 

🎯 useReducer란 무엇일까요?

useReducer는 상태(state)를 관리하는 도구예요.
React에서는 보통 **useState**를 사용해서 상태를 관리하지만, 상태가 복잡해지면 코드가 지저분해질 수 있어요.
이럴 때 **useReducer**를 사용하면 상태를 더 체계적이고 깔끔하게 관리할 수 있어요.

 

🧩 useState와 useReducer 비교하기

먼저 useState를 간단하게 복습해볼까요?

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

 

이 코드에서는

• useState를 사용해서 숫자 하나만 관리해요.
• 간단하니까 useState로 충분하죠.

하지만 상태가 복잡해지거나 다양한 액션을 처리해야 한다면?
여기서 **useReducer**가 등장합니다! 🚀

 

🛠️ useReducer 기본 예시

**useReducer**를 사용하면 상태와 그 상태를 어떻게 바꿀지를 명확하게 정의할 수 있어요.
먼저 기본 구조를 알아볼까요?

 

1. useReducer 기본 문법

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

 

• reducer: 상태를 어떻게 바꿀지 정의하는 함수예요.
• initialState: 상태의 초기값이에요.
• dispatch: 상태를 바꿀 때 실행하는 함수예요.

 

2. 간단한 예제: 카운터 만들기

아까 useState로 만들었던 카운터를 useReducer로 다시 만들어 볼게요!

 

import React, { useReducer } from "react";

// 상태를 어떻게 바꿀지 정의하는 reducer 함수
function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const initialState = { count: 0 }; // 초기 상태
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>증가</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>감소</button>
    </div>
  );
}

export default Counter;

 

🔍 코드 설명

1. reducer 함수
   • reducer는 상태(state)를 변경하는 로직을 모아놓은 함수예요.
   • action.type에 따라 어떤 상태를 어떻게 바꿀지 결정해요.
   • 예를 들어:
     • INCREMENT: count를 +1 증가시켜요.
     • DECREMENT: count를 -1 감소시켜요.
2. useReducer 훅
   • useReducer를 사용해서 state(현재 상태)와 dispatch(상태를 변경하는 함수)를 가져옵니다.
3. dispatch 함수
   • dispatch({ type: "INCREMENT" })처럼 호출해서 상태를 변경합니다.
   • 이때 type은 어떤 액션인지 나타내는 역할을 해요.

 

🍕 상점 이야기로 이해하기

여러분이 피자 가게를 운영한다고 생각해 봐요. 🍕

• state: 가게의 상태 (예: 피자 수량 10개)
• action: 어떤 행동이 일어날지 (예: "피자 추가" 또는 "피자 판매")
• reducer: 이 행동에 따라 상태를 어떻게 바꿀지 정의하는 곳이에요.

피자 가게에 들어온 주문(액션)을 dispatch에 전달하면,
reducer가 "피자를 하나 더 추가할지" 아니면 "하나를 판매할지" 결정을 내려요.

 

🧩 useReducer를 언제 사용할까요?

1. 상태가 복잡하거나 여러 종류의 값을 관리할 때
   • 예: 할 일 목록 관리, 쇼핑몰 장바구니 등
2. 상태 변경 로직이 한곳에 모여 있어야 할 때
   • 모든 상태 변경 로직이 reducer 안에 모여 있으니까 유지보수가 쉬워져요.
3. 여러 액션을 처리해야 할 때
   • 상태를 바꿀 때 여러 가지 동작(INCREMENT, DECREMENT, RESET 등)을 처리해야 한다면 useReducer가 깔끔해요.

 

🌟 정리하자면!

useReducer는 상태를 체계적으로 관리하고, 상태를 어떻게 바꿀지 미리 정의하는 도구예요.
복잡한 상태와 여러 액션이 필요한 상황에서 useState보다 더 강력하고 깔끔한 해결책이 됩니다.