useReducer (유즈리듀서)

 

🟡 useReducer

복잡한 상태를 체계적으로 관리하기 위한 React Hook.

useState는 간단한 상태를 관리할 때 사용하며, 여러 상태가 서로 연관되거나 상태 변경 로직이 복잡한 경우에는 useReducer를 사용하는 것이 좋다.

 

◼️ 필요 이유

useState는 간단한 상태 관리에는 적합하지만 다음과 같은 상황에서는 코드가 복잡해질 수 있다.

1️⃣ 여러 상태가 서로 연관된 경우

여러 개의 상태가 함께 변경되어야 한다면 useState를 여러 번 사용해야 한다.

const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const [author, setAuthor] = useState("");

• 상태가 많아질수록 관리하기 어려워진다.

 

2️⃣ 상태 변경 로직이 복잡한 경우

조건에 따라 여러 상태를 함께 변경하거나, 상태 변경 로직이 많아질수록 컴포넌트 내부 코드가 복잡해진다.

 

👉 useReducer는 이러한 상태 변경 로직을 별도의 함수로 분리하여 관리할 수 있다.

 

◼️ 주요 특징

• 복잡한 상태 로직
  • 여러 하위 값으로 구성된 복잡한 상태를 관리해야 할 때 유용하다. 
• 서로 관련된 상태
  • 한 상태의 변경이 다른 상태에 영향을 미치거나, 여러 상태가 동시에 변경되어야 할 때 사용한다.
• 상태 로직 분리
  • 상태 업데이트 로직을 컴포넌트 밖으로 분리하여 코드를 깔끔하게 관리할 수 있다.
• 재사용성
  • 동일한 상태 관리 로직을 여러 컴포넌트에서 재사용할 수 있다.

 

◼️ 핵심 개념

🔹 reducer

상태를 어떻게 변경할지 정의하는 함수.

현재 상태(state)와 액션(action)을 받아 새로운 상태를 반환한다.

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

    default:
      return state;
  }
}

 

🔹 State

현재 상태를 의미한다.

state.count

 

🔹 action

어떤 상태 변경을 할 것인지 나타내는 객체이다.

일반적으로 type 속성을 사용한다.

{
  type: "INCREMENT"
}

• 필요한 경우 데이터를 함께 전달할 수도 있다.

{
  type: "ADD",
  payload: 10
}

 

🔹 dispatch

Reducer에게 Action을 전달하는 함수이다.

dispatch({ type: "INCREMENT" });

 

◼️ 기본 사용 방법

useReducer는 state와 dispatch를 반환하며, reducer 함수와 초기 상태(initialState)를 인수로 받는다.

1️⃣ Reducer 함수 작성 → 2️⃣ useReducer 사용 → 3️⃣ dispatch로 상태 변경

import React, { useReducer } from 'react';

// 1. Reducer 함수 정의
// 이 함수는 '상태를 어떻게 바꿀지' 정의합니다.
// currentState: 현재 상태
// action: 어떤 일이 발생했는지 (객체 형태, 주로 type 속성 포함)
function reducer(currentState, action) {
  switch (action.type) {
    case 'INCREMENT': // 'INCREMENT' 액션이 오면
      return { count: currentState.count + 1 }; // count를 1 증가시킨 새 상태 반환
    case 'DECREMENT': // 'DECREMENT' 액션이 오면
      return { count: currentState.count - 1 }; // count를 1 감소시킨 새 상태 반환
    case 'RESET': // 'RESET' 액션이 오면
      return { count: 0 }; // count를 0으로 초기화한 새 상태 반환
    default:
      return currentState; // 알 수 없는 액션은 에러 발생
  }
}

// 2. 컴포넌트에서 useReducer 사용
function Counter() {
  // useReducer(reducer 함수, 초기 상태)
  // useReducer는 [현재 상태, dispatch 함수]를 반환
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>현재 카운트: {state.count}</p>
      {/* 3. dispatch 함수를 호출하여 액션 전달 */}
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>감소</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>초기화</button>
    </div>
  );
}

export default Counter;

 

 

📋 useState vs useReducer 📋

useState	useReducer
간단한 상태 관리	복잡한 상태 관리
상태 변경 로직이 단순함	상태 변경 로직을 분리하여 관리
작은 프로젝트에 적합	여러 상태를 함께 관리할 때 적합
사용 방법이 간단함	reducer와 dispatch를 사용