[React]useReducer

개요

Racct개발시 상태관리는 언제나 중요합니다. 사용자 인터랙션에 따라 애플리케이션의 상태가 변경되고, 이에 따라 UI가 업데이트되어야 하는데, 이를 위해 React에서는 상태관리를 위해 useState와 같은 훅을 제공합니다.
하지만 규모가 커지고 복잡해지면 useState만으로는 상태 관리가 어려울 수 있습니다. 이런 상황에서 useReducer 훅이 유용하게 사용됩니다.

useReducer란?

useReducer는 상태를 업데이트하기 위해 reducer 함수를 사용합니다. reducer 함수는 현재 상태와 액션을 전달받아 새로운 상태를 반환합니다. 이때, 상태의 업데이트 로직은 reducer 함수 내부에 정의됩니다. 이러한 접근 방식은 컴포넌트와 상태 업데이트 로직을 분리하고 중앙 집중화하여 관리하기 쉽게 만듭니다.

아래는 간단한 카운터 애플리케이션의 useReducer 사용 예제입니다.

import React, { 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 };
    default:
      throw new Error();
  }
}

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

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

export default Counter;

위 예제에서는 초기 상태를 { count: 0 }으로 설정하고, reducer 함수를 정의하여 'increment' 이나 'decrement' 액션타입에 따라 상태를 다르게 업데이트합니다. Counter 컴포넌트에서는 useReducer 훅을 사용하여 상태와 dispatch 함수를 가져와서 이를 통해 상태를 업데이트합니다.

언제 사용해야 할까?

복잡한 상태 로직을 가진 경우

상태가 복잡하고 여러 하위 값으로 구성된 경우, useReducer를 사용하여 상태 관리를 단순화할 수 있습니다. 예를 들어, 상태가 객체로 구성되어 있고 여러 하위 속성이 포함된 경우, useState 대신 useReducer를 고려할 수 있습니다. useReducer는 reducer 함수를 통해 복잡한 상태 업데이트 로직을 관리하므로 코드의 가독성과 유지 보수성을 향상시킵니다.

상태 업데이트 로직을 분리하고 중앙 집중화하고 싶은 경우

useReducer를 사용하면 애플리케이션의 다양한 부분에서 동일한 상태 업데이트 로직을 사용할 수 있으므로 코드의 중복을 방지하고 유지 보수성을 향상시킬 수 있습니다. 이는 애플리케이션의 규모가 커지고 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 특히 유용합니다. 또한, reducer 함수를 별도로 분리하여 관리하면 코드의 가독성을 높이고 수정이 쉬워집니다.

비동기 로직이 포함된 복잡한 상태 업데이트

때로는 상태를 업데이트할 때 비동기 작업이 필요한 경우가 있습니다. 이런 경우 useReducer와 함께 미들웨어 또는 비동기 작업을 처리할 수 있는 라이브러리와 함께 사용하여 상태 업데이트를 더욱 유연하게 관리할 수 있습니다.

한마디로 정리하자면 결국 useReducer는 상태관리를 위해 사용하는 훅입니다. 그러나 비교적 간단한 상태 관리에는 useState가 더 적합할 수 있으므로 상황에 맞게 적절히 선택해야 합니다.