컨텍스트 API로 상태 관리하기


컨텍스트 API로 상태 관리하기


리액트 애플리케이션을 개발할 때 컴포넌트 간의 상태 관리는 매우 중요합니다. 리덕스(Redux)와 같은 상태 관리 라이브러리를 사용할 수 있지만, 때로는 내장된 기능인 컨텍스트 API(Context API)를 사용하는 것이 더 간단하고 효율적일 수 있습니다. 이 포스팅에서는 리액트의 Context API를 사용하여 상태를 관리하는 방법을 자세히 설명하겠습니다.


컨텍스트 API의 중요성


컨텍스트 API는 컴포넌트 트리 전체에 데이터를 전역적으로 제공할 수 있는 방법을 제공합니다. 이를 통해 중첩된 컴포넌트에 props를 일일이 전달하지 않고도 상태를 공유할 수 있습니다. 특히, 글로벌 상태 관리가 필요한 경우에 매우 유용합니다.


컨텍스트 API 기본 개념


컨텍스트 API는 React.createContext를 사용하여 컨텍스트 객체를 생성하는 것으로 시작합니다. 컨텍스트 객체는 두 가지 주요 컴포넌트를 제공합니다: ProviderConsumer.


  • Provider: 하위 컴포넌트에 컨텍스트 값을 제공하는 역할을 합니다.
  • Consumer: 상위 컴포넌트에서 제공한 컨텍스트 값을 사용하는 역할을 합니다.

컨텍스트 API 설정 및 사용


컨텍스트 API를 사용하여 간단한 테마 토글 애플리케이션을 만들어 보겠습니다.


1. 컨텍스트 생성


먼저, 컨텍스트를 생성합니다.


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

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeContext;

2. 컨텍스트 제공


이제 ThemeProvider를 사용하여 애플리케이션에 컨텍스트를 제공합니다.


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';

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

3. 컨텍스트 사용


컨텍스트 값을 사용하려면 useContext 훅을 사용할 수 있습니다.


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

const ThemedButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={toggleTheme}
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      Toggle Theme
    </button>
  );
};

export default ThemedButton;

4. 전체 예제


위의 모든 코드를 결합하여 테마 토글 애플리케이션을 완성합니다.


// ThemeContext.js
import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeContext;

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';

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

// App.js
import React from 'react';
import ThemedButton from './ThemedButton';

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <ThemedButton />
    </div>
  );
};

export default App;

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

const ThemedButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={toggleTheme}
      style={{
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      Toggle Theme
    </button>
  );
};

export default ThemedButton;

위 코드는 컨텍스트 API를 사용하여 전역 상태를 관리하고, 테마를 토글하는 간단한 예제입니다. ThemeProvider는 테마 상태를 제공하고, ThemedButton 컴포넌트는 이를 사용하여 테마를 변경합니다.


컨텍스트 API의 장점과 단점


장점

  • 간단한 상태 관리: 컨텍스트 API는 설정이 간단하고, 리덕스와 같은 외부 라이브러리 없이도 전역 상태를 관리할 수 있습니다.
  • Props Drilling 방지: 깊게 중첩된 컴포넌트 트리에서도 props를 일일이 전달하지 않고 상태를 공유할 수 있습니다.

단점

  • 성능 문제: 컨텍스트 값이 변경될 때마다 해당 컨텍스트를 사용하는 모든 컴포넌트가 리렌더링됩니다.
  • 복잡한 상태 관리 어려움: 리덕스와 비교해 미들웨어를 통한 복잡한 상태 관리가 어렵습니다.

주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 리액트의 Context API를 사용하여 상태를 관리하는 방법을 살펴보았습니다. Context API는 간단한 설정으로 전역 상태 관리를 가능하게 하며, props drilling 문제를 해결할 수 있습니다. 하지만 성능 문제와 복잡한 상태 관리가 필요한 경우에는 리덕스와 같은 라이브러리와 함께 사용하는 것이 좋습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


다음 이전