Blog

React와 Context API로 상태 관리하기

React는 컴포넌트 기반의 사용자 인터페이스를 구축하기 위한 라이브러리입니다. 일반적으로 React에서 데이터를 부모 컴포넌트로부터 자식 컴포넌트로 전달하는 과정은 props를 통해 이루어집니다. 하지만 어플리케이션이 복잡해지면, 여러 컴포넌트들 간에 데이터를 전달해야 할 경우, 이 과정이 번거롭고 효율적이지 않은 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 React는 Context API를 도입하였습니다. Context API를 활용하면, 여러 컴포넌트 간의 데이터 공유가 용이해집니다.

Context API란 무엇인가?

Context API는 React 내에서 전역적으로 데이터를 관리하고 공유할 수 있는 방법입니다. 이를 통해, 특정 데이터를 필요로 하는 컴포넌트들 사이에서 props를 일일이 전달하지 않고도 데이터를 손쉽게 공유할 수 있습니다. 주로 여러 계층의 컴포넌트에 걸쳐 사용되는 데이터는 로그인한 사용자 정보, 애플리케이션의 테마, 언어 설정 등이 될 수 있습니다. 따라서 Context API는 복잡한 데이터 전달 문제를 해결하는 데 도움을 줍니다.

Context API의 구성 요소

Context는 다음과 같은 주요 기능들로 구성됩니다:

• createContext(): 새로운 Context 객체를 생성합니다.
• Provider: Context의 데이터를 제공하는 역할을 하는 컴포넌트입니다. 하위의 모든 컴포넌트는 이 Provider를 통해 데이터에 접근할 수 있습니다.
• Consumer: Context에 저장된 데이터를 구독하는 컴포넌트로, 데이터를 필요로 하는 컴포넌트에서 사용됩니다.

Context API 사용 방법

Context API를 사용하는 기본적인 방법은 다음과 같습니다:

• 우선, React.createContext() 메서드를 사용하여 새로운 Context 객체를 생성합니다. 이 객체는 이후 Provider 및 Consumer로 사용됩니다.
• 그 다음, 생성된 Context 객체를 사용하여 Provider 컴포넌트를 하위 컴포넌트로 감쌉니다. 이 때, Provider의 value 속성에 공유할 데이터를 지정해줍니다.
• 마지막으로, 데이터를 사용할 컴포넌트에서 Consumer를 사용하거나, 함수형 컴포넌트의 경우 useContext() 훅을 활용하여 Context의 데이터를 읽어올 수 있습니다.

Context API의 사용 예제

다음은 Context API를 활용하여 테마 정보를 관리하는 예제입니다.

Context 객체 생성하기

먼저, 테마를 정의하고 Context 객체를 생성합니다.

import React, { createContext } from 'react';
export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};
export const ThemeContext = createContext(themes.dark); // 기본값으로 dark 테마 사용

ThemedButton 컴포넌트 만들기

이제 ThemeContext를 이용하여 테마에 따라 스타일을 적용하는 버튼 컴포넌트를 작성해보겠습니다.

import React from 'react';
import { ThemeContext } from './ThemeContext';
class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    const theme = this.context;
    return (Click me!);
  }
}

컨텍스트 제공하기

마지막으로 위에서 만든 ThemedButton을 앱의 일부로 감싸서 Context를 제공하도록 하겠습니다.

import React from 'react';
import { ThemeContext, themes } from './ThemeContext';
import ThemedButton from './ThemedButton';
const App = () => {
  return (
    
      
    
  );
};
export default App;

Context API 사용 시 유의사항

Context API는 매우 유용한 도구이지만, 몇 가지 주의해야 할 사항도 있습니다. 첫째, Context를 남용하게 될 경우, 컴포넌트 간의 의존성이 증가하고, 결과적으로 코드의 유지보수가 어려워질 수 있습니다. 둘째, 기존의 props를 사용한 방식에 비해 성능이 저하될 수 있는 경우도 있으므로, 필요한 경우에만 적절하게 사용하는 것이 중요합니다.

결론

상태 관리를 위해 React에서 Context API를 활용하는 것은 복잡한 데이터 흐름을 단순화하는 훌륭한 방법입니다. 이를 통해 여러 컴포넌트 간의 데이터 공유가 용이해지며, 중복된 props 전달이 줄어들어 코드가 깔끔해집니다. 그러나 Context의 사용에는 몇 가지 유의해야 할 점이 있으므로, 상황에 따라 적절히 활용하는 것이 좋습니다.

자주 찾으시는 질문 FAQ