[React] useState, useReducer, Context API 비교

해피몬·2023년 3월 15일

useState

useState는 리액트 함수형 컴포넌트에서 가장 기본적인 상태 관리 훅입니다. 이 훅은 컴포넌트 내에서 지역적으로 상태를 관리할 때 사용됩니다. 상태의 초기값을 전달하면, 그 상태와 그 상태를 업데이트할 수 있는 함수를 반환합니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count는 상태 값, setCount는 상태 업데이트 함수

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

상태 값을 설정하고 그 값을 업데이트하는 것이 매우 간단합니다.
useState는 컴포넌트의 로컬 상태를 관리합니다. 컴포넌트가 언마운트될 때 상태도 같이 소멸합니다.
작은 컴포넌트나 상태 변화가 단순한 경우에 적합합니다.

언제 사용해야 할까?

상태가 단순하고, 그 상태가 오직 하나의 컴포넌트에만 관련되어 있을 때.
상태 관리가 복잡하지 않으며, 데이터가 자주 업데이트되지 않는 경우.

useReducer

useReducer는 복잡한 상태 로직이 필요하거나, 여러 상태 값이 관련된 경우에 적합한 훅입니다. 이 훅은 리듀서 함수와 현재 상태, 그리고 상태 업데이트를 트리거하는 dispatch 함수를 반환합니다. 상태 업데이트 로직을 외부로 분리해 좀 더 명확한 상태 관리 패턴을 만들 수 있습니다.

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:
      return state;
  }
}

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

  return (
    <div>
      <p>현재 카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>증가</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>감소</button>
    </div>
  );
}

상태 변화 로직을 reducer 함수로 분리하여 유지보수와 가독성을 높일 수 있습니다.
상태 변화가 복잡하거나 다양한 액션을 처리해야 할 때 적합합니다.
여러 가지 액션을 하나의 리듀서 함수에서 관리할 수 있습니다.

언제 사용해야 할까?

상태가 여러 값으로 나누어져 있거나 복잡한 상태 업데이트 로직이 있을 때.
여러 가지 상태 변화 로직을 중앙에서 관리해야 할 때.
useState로는 관리하기 어려운 복잡한 상태를 처리할 때.

Context API

Context API는 리액트 애플리케이션에서 전역 상태를 관리할 때 사용합니다. 주로 부모-자식 관계의 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용합니다. Context는 기본적으로 Provider와 Consumer 패턴을 사용해 데이터를 전달합니다.

Context 생성

import React, { createContext, useState } from 'react';

const CountContext = createContext();

Provider로 상태 공유

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
}

Consumer 또는 useContext 훅으로 값 사용

import React, { useContext } from 'react';

function Counter() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

부모-자식 관계의 여러 컴포넌트에서 동일한 상태를 공유할 수 있습니다.
상태를 여러 컴포넌트 간에 쉽게 전달할 수 있습니다.
중간 컴포넌트들이 상태를 전달하는 과정에서 생기는 'Prop Drilling' 문제를 해결할 수 있습니다.

언제 사용해야 할까?

애플리케이션의 여러 컴포넌트에서 동일한 상태를 공유해야 할 때.
깊은 컴포넌트 트리 구조에서 상태를 전달할 때 발생하는 props 전달 문제를 해결하고 싶을 때.
상태가 여러 컴포넌트 간에 자주 사용될 때.

비교

훅	주요 용도	상태 복잡도	상태 공유
useState	단순한 상태 관리 (지역 상태)	단순	불가능
useReducer	복잡한 상태 관리 및 상태 로직 분리	복잡 (여러 상태/액션)	불가능
Context API	전역 상태 관리 (여러 컴포넌트 간 상태 공유)	단순 또는 복잡한 상태 모두 가능	가능 (전역 상태)