React로 상태 관리하기: Context API와 useState 비교

React Context API와 useState 훅은 각각 다른 용도로 사용된다. useState는 컴포넌트 내부의 로컬 상태를 관리하는 데 사용되며, Context API는 여러 컴포넌트에서 전역적으로 공유되는 상태를 관리하는 데 사용된다. TypeScript를 사용하여 두 방법을 비교하며 예제를 통해 설명한다.

useState와 Context API 비교

useState 훅

useState는 개별 컴포넌트 내부의 상태를 관리한다. 상태와 상태를 업데이트하는 함수를 반환한다.

예제: useState

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

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

export default Counter;

이 예제에서 useState 훅을 사용하여 count라는 로컬 상태를 관리한다. Counter 컴포넌트 내부에서만 상태를 사용할 수 있다.

Context API

Context API는 여러 컴포넌트에서 전역적으로 상태를 공유할 수 있게 해준다. 이를 위해 Context를 생성하고, Provider를 통해 상태를 전달하며, Consumer를 통해 상태를 소비한다.

예제: Context API

1. Context 생성 및 Provider 설정

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

interface CountContextProps {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
}

export const CountContext = createContext<CountContextProps | undefined>(undefined);

const CountProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [count, setCount] = useState<number>(0);

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

export default CountProvider;

2. Context 소비

import React, { useContext } from 'react';
import { CountContext } from './CountProvider';

const Counter: React.FC = () => {
  const context = useContext(CountContext);

  if (!context) {
    throw new Error('Counter must be used within a CountProvider');
  }

  const { count, setCount } = context;

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

export default Counter;

3. Provider로 감싸기

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';
import CountProvider from './CountProvider';

const App: React.FC = () => {
  return (
    <CountProvider>
      <Counter />
      {/* 다른 컴포넌트도 CountProvider의 상태를 공유할 수 있다 */}
    </CountProvider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

비교

useState

• useState는 로컬 상태를 관리한다.
• 상태와 상태 업데이트 함수를 반환한다.
• 개별 컴포넌트 내부에서만 상태를 사용할 수 있다.

Context API

• Context API는 여러 컴포넌트에서 전역적으로 상태를 공유할 수 있게 해준다.
• Context를 생성하고 Provider를 통해 상태를 전달하며 Consumer를 통해 상태를 소비한다.
• 전역 상태 관리가 필요할 때 유용하다. 예를 들어, 사용자 인증 상태, 테마 설정, 글로벌 알림 등.

Context API는 상태가 여러 컴포넌트에서 필요할 때 유용하다. 반면에 useState는 개별 컴포넌트 내부에서 간단한 상태를 관리할 때 적합하다. 이 두 방법을 적절히 사용하면 더욱 효율적으로 React 애플리케이션을 개발할 수 있다.