[React] Provider, useContext

 

 

컨텍스트(Context)는 React에서 컴포넌트 트리 전체에 걸쳐 데이터를 쉽게 전달하고 공유하기 위해 사용되는 기능입니다. 컨텍스트를 이용하면 컴포넌트 간의 데이터를 전역적으로 관리하고, 필요한 곳에서 쉽게 접근할 수 있습니다. 이는 특히 여러 컴포넌트가 공통적으로 사용하는 데이터(예: 테마, 사용자 정보, 언어 설정 등)를 전달할 때 유용합니다.

 

컨텍스트의 주요 요소

1. 컨텍스트 생성 (React.createContext)

컨텍스트를 만들기 위해 React.createContext 함수를 사용합니다. 이 함수는 기본값을 받을 수 있는 컨텍스트 객체를 반환합니다.

 

2. 프로바이더 (Context.Provider)

Provider는 컨텍스트를 제공하는 컴포넌트입니다. Provider를 사용하면 컴포넌트 트리의 하위 컴포넌트에게 값을 전달할 수 있습니다. Provider는 value prop을 받아서 이를 하위 컴포넌트들에게 전달합니다.

 

3. 컨슈머 (Context.Consumer)

컨슈머는 컨텍스트 값을 사용하는 컴포넌트입니다. 컨슈머는 함수 컴포넌트에서 주로 사용되며, 제공된 컨텍스트 값을 인자로 받는 함수로 값을 접근할 수 있습니다.

 

4. useContext 훅

함수 컴포넌트에서 컨텍스트를 더 쉽게 사용할 수 있도록 제공되는 React 훅입니다. useContext 훅을 사용하면 컨슈머 없이도 컨텍스트 값을 직접 접근할 수 있습니다.

 

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

// 컨텍스트 생성
const ThemeContext = createContext('light');

const App = () => {
  const [theme, setTheme] = useState('light');

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

const Toolbar = () => {
  return (
    <div>
      <ThemeButton />
    </div>
  );
};

const ThemeButton = () => {
  const { theme, setTheme } = useContext(ThemeContext);

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

export default App;

 

 

 

 

---

 

 

 

1. 프로퍼티 드릴링(prop drilling) 방지

컴포넌트 트리에서 깊숙한 곳에 있는 자식 컴포넌트에 데이터를 전달해야 할 때, 중간 단계의 여러 컴포넌트를 거쳐야 할 수 있습니다. 이러한 방식을 프로퍼티 드릴링이라고 부르는데, 이는 코드의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다. useContext를 사용하면 상위 컴포넌트에서 정의한 컨텍스트 값을 하위 컴포넌트가 직접 접근할 수 있어, 중간 컴포넌트를 거치지 않고 데이터를 전달할 수 있습니다.

 

2. 상태 관리 간소화

어플리케이션의 전역 상태를 관리할 때, useContext는 훌륭한 도구가 됩니다. 예를 들어, 사용자 인증 정보, 테마 설정, 현재 언어 등 여러 컴포넌트에서 공통적으로 사용하는 상태를 컨텍스트에 저장하고, 필요한 컴포넌트에서 이 컨텍스트를 쉽게 접근할 수 있게 해줍니다.

 

3. 리액티브 업데이트

컨텍스트 값을 업데이트하면 이 값을 사용하는 모든 컴포넌트가 자동으로 다시 렌더링됩니다. 이는 전역 상태가 변경될 때 이를 사용하는 컴포넌트들이 자동으로 최신 상태를 반영하게 해줍니다.

 

4. 코드의 일관성 및 유지보수성 향상

컨텍스트를 사용하면 코드의 일관성이 높아지고, 전역 상태를 중앙 집중식으로 관리할 수 있어 유지보수가 쉬워집니다. 이는 특히 대규모 어플리케이션에서 매우 유용합니다.