[React] useReducer에 대하여

천천히조금씩·2025년 3월 9일

React ...에 대하여

목록 보기

1/6

🎯 들어가며

프론트엔드 웹개발, 특히 React를 주로 공부하고 사용하고 있지만 아직 모르는 부분들이 너무나도 많은 것 같다. 리액트 훅, 배열 다루기 등 여전히 익숙하지 않은 것들이 많다. 프로젝트에 사용할 때마다 구글링 또는 AI에 의존하는 경우가 많은데 이러면 내 것이 되긴 어려울 것 같아서 블로그에 정리하면서 공부하도록 하겠다.

👍 그래서 오늘은 첫 스텝으로 useReducer에 대해 공부하고 정리해보자!

📌 useReducer 기본 개념

useReducer는 React에서 state를 관리하는 Hook이다.
보통 상태관리에는 useState를 사용하지만 여러 개의 상태를 관리하거나 상태 변경 로직이 복잡한 경우 useReducer를 사용하는 것이 좋다.

🚩 useState vs useReducer

	useState	userReducer
상태 저장 방식	단순한 상태 변수	객체 형태로 상태 관리
상태 변경 방식	setState로 직접 변경	dispatch로 변경
변경 로직	컴포넌트 내부에서 처리	reducer 함수에서 처리
사용 사례	단순한 상태 변경	여러 개의 상태 변경, 복잡한 로직이 필요할 때

🚩 useReducer의 기본 문법

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

state : 현재 상태 값 (리렌더링 시 유지됨)
dispatch : 상태를 변경하는 함수 (action을 전달)
reducer : 상태를 변경하는 함수 (로직이 정의됨)
initialState : 상태의 초기값

✍ 기본 사용 예시

import { useReducer } from "react";

// 초기 상태 정의
const initialState = { count: 0 };

// 리듀서 함수 (현재 상태 + 액션을 받아 새로운 상태 반환)
function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    case "RESET":
      return initialState;
    default:
      return state;
  }
}

export default function Counter() {
  // useReducer 사용
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
      <button onClick={() => dispatch({ type: "RESET" })}>Reset</button>
    </div>
  );
}

💻 결과

dispatch({ type: "INCREMENT" }) 실행 → count +1 증가
dispatch({ type: "DECREMENT" }) 실행 → count -1 감소
dispatch({ type: "RESET" }) 실행 → count 0으로 초기화

📌 userReducer의 주요 개념

🚩 `state` (상태)

현재 컴포넌트의 상태 값
useState의 상태와 비슷하지만 더 복잡한 상태를 관리할 수 있음.
보통 객체 형태로 관리한다.

✍ 예시

const initialState = {
  count: 0,
  message: "Hello",
};

🚩`dispatch` (`action`을 전달하는 함수)

dispatch(action)을 호출하면 reducer가 실행됨
action 객체를 매개변수로 전달
버튼 클릭, 입력값 변경 등 이벤트가 발생할 때 호출됨

✍ 예시

dispatch({ type: "INCREMENT" });
dispatch({ type: "CHANGE_MESSAGE", payload: "Goodbye" });

🚩`action` (상태 변경 명령)

상태를 변경하기 위한 "명령"
type 필수 (payload는 선택)

✍ 예시

const action1 = { type: "INCREMENT" }; // count +1 증가
const action2 = { type: "CHANGE_MESSAGE", payload: "New Message" }; // message 변경

➕ payload : action과 함께 전달되는 추가 데이터
action.type이 무엇을 해야하는지 나타낸다면 payload는 그 명령을 실행하는데 필요한 값을 담는다.
값이 필요하지 않은 경우에는 payload 없이 사용할 수 있다.

🚩 `reducer` (상태 변경 함수)

state와 action을 받아서 새로운 상태를 반환
return 문을 통해 기존 상태를 직접 수정하지 않고, 새로운 상태를 반환해야 함 (불변성 유지)

✍ 예시

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    case "CHANGE_MESSAGE":
      return { ...state, message: action.payload };
    default:
      return state;
  }
}