[react] JSX에서 useReducer 훅 사용하기

26 Dec 2023

react

React 애플리케이션을 개발하다 보면 상태 관리가 중요하게 작용합니다. useState 훅은 간단한 상태 관리에 적합하지만, 복잡한 상태 관리에는 제한적일 수 있습니다. 이런 경우에 useReducer 훅을 사용하여 더 유연하게 상태를 관리할 수 있습니다.

useReducer 훅을 사용하면 상태 변경을 위한 액션을 정의하고 이를 디스패치(dispatch)하여 상태를 관리할 수 있습니다. 이를 JSX에서 구현하는 방법을 알아보겠습니다.

1. 초기 상태 및 액션 정의하기

먼저, useReducer 훅을 사용하기 위해 초기 상태와 액션을 정의합니다.

const initialState = { count: 0 };

const actionTypes = {
  increment: "INCREMENT",
  decrement: "DECREMENT"
};

위의 코드에서는 initialState에 초기 상태를 정의하고, actionTypes에는 액션의 종류를 문자열 상수로 정의했습니다.

2. 리듀서 함수 작성하기

다음으로, 상태 및 액션을 처리할 리듀서 함수를 작성합니다.

function reducer(state, action) {
  switch (action.type) {
    case actionTypes.increment:
      return { count: state.count + 1 };
    case actionTypes.decrement:
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

위의 코드에서 reducer 함수는 현재 상태와 액션을 받아서 switch 문을 통해 각 액션에 따른 새로운 상태를 반환합니다.

3. JSX에서 useReducer 훅 사용하기

이제 useReducer 훅을 사용하여 JSX에서 상태 및 디스패치를 정의할 수 있습니다.

import React, { useReducer } from 'react';

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: actionTypes.increment })}>Increment</button>
      <button onClick={() => dispatch({ type: actionTypes.decrement })}>Decrement</button>
    </div>
  );
}

위의 코드에서 useReducer 훅을 사용하여 리듀서 함수와 초기 상태를 전달받고, 이를 통해 상태 및 디스패치를 사용하여 JSX에 반영했습니다.

useReducer 훅을 사용함으로써, 더 복잡한 상태 관리를 하는 React 애플리케이션을 개발할 때 유용하게 활용할 수 있습니다.