React에서의 상태 관리: useState와 useReducer 훅 소개.

작성일 : 2024-06-26

React에서의 상태 관리: useState와 useReducer 훅 소개

React는 컴포넌트 기반의 라이브러리로, 상태(state)를 사용하여 UI 변화를 관리합니다. 상태 관리는 React 앱 개발에서 매우 중요한 부분을 차지하며, 이를 효율적으로 관리하는 것이 필요합니다. 이 글에서는 React의 상태 관리 훅인 useState와 useReducer에 대해 자세히 알아보고, 각각의 사용법과 장단점을 비교하여 어떤 상황에서 어떤 방법을 사용할지에 대해 설명합니다.

useState 훅

useState는 React에서 가장 기본적인 상태 관리 훅으로, 함수형 컴포넌트 내에서 상태 값을 추가할 수 있게 해줍니다. 매우 간단하고 직관적인 API를 제공하므로 소규모 상태 관리에 적합합니다.

사용법

useState는 아래와 같은 형식을 사용합니다:


javascript
import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

useState는 초기 상태 값을 인자로 받아 상태 값과 상태를 갱신하는 함수를 반환합니다. 위 예제에서 count는 상태 값이며, setCount는 상태 갱신 함수입니다.

장단점

장점:

간단함: 사용법이 매우 간단하고 직관적입니다.
초기 설정: 초기 상태 값을 설정하기 용이합니다.
독립성: 상태와 상태 갱신 로직이 컴포넌트 내부에만 국한됩니다.

단점:

복잡한 상태 관리의 어려움: 복잡한 상태 업데이트 로직을 처리하는 데는 적합하지 않습니다.
동시 업데이트 문제: 여러 상태를 동시에 업데이트할 때 충돌이 발생할 수 있습니다.

useReducer 훅

useReducer는 보다 복잡한 상태 관리와 로직을 처리하기 위해 사용되는 훅입니다. 주로 상태가 여러 단계로 나뉘어지고, 다양한 액션(action)에 따라 상태가 변경되는 경우에 적합합니다.

사용법

useReducer는 아래와 같은 형식을 사용합니다:


javascript
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 };
    default:
      throw new Error();
  }
}

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

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

useReducer는 리듀서 함수와 초기 상태를 인자로 받아 상태 값과 디스패치(dispatch) 함수를 반환합니다. 리듀서 함수는 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수입니다.

장단점

장점:

복잡한 상태 관리에 용이: 복잡한 상태 업데이트와 다양한 액션 관리에 적합합니다.
명확한 로직 분리: 상태 갱신 로직을 리듀서 함수로 분리하여 코드의 가독성과 유지보수성을 높입니다.
동시 업데이트 처리: 여러 상태를 동시에 업데이트하는 상황에서 더 적합합니다.

단점:

초기 설정의 복잡성: 설정과 초기화 과정이 다소 복잡할 수 있습니다.
보일러플레이트 코드 증가: 소규모 상태 관리에 비해 코드가 길어질 수 있습니다.

상황별 사용법 비교

간단한 상태 관리

간단한 상태 관리가 필요한 경우에는 useState가 더 적합합니다. 예를 들면, 단순히 카운터 기능을 구현하거나 특정 UI 요소의 토글 상태를 관리하는 경우입니다. useState는 간단하고 직관적이므로 빠르게 기능을 구현할 수 있습니다.

복잡한 상태 관리

여러 단계로 나뉘어진 복잡한 상태 관리와 다양한 액션이 필요한 경우에는 useReducer가 더 적합합니다. 예를 들면, 폼 상태를 관리하거나, 여러 페이지에서 공통으로 사용하는 상태를 관리하는 경우입니다. useReducer는 상태 관리 로직을 명확하게 분리하여 코드의 가독성을 높여줍니다.

결론

React에서의 상태 관리는 애플리케이션의 성능과 유지보수에 중요한 영향을 미칩니다. useState는 간단한 상태 관리에 적합하며, 빠르고 직관적인 사용법을 제공합니다. 반면, useReducer는 복잡한 상태 관리와 다양한 액션 처리에 유리하며, 상태 관리 로직을 분리하여 코드의 가독성과 유지보수를 용이하게 합니다. 상황에 맞게 적절한 훅을 선택하여 효율적인 React 앱을 개발하는 것이 중요합니다.