react context

1. context 

전역적으로 데이터를 공유할 수 있도록 도와주는 기능

• 컴포넌트 트리 안에서 전역적으로 사용할 수 있는 값 관리
• Props Drilling을 피하고, 컴포넌트 간 상태를 쉽게 공유 가능 
• 데이터를 공유하기 위한 방법
• 로그인한 사용자의 정보, 다크모드 UI 테마, 언어 설정 등 

 

useContext – React

 

2. 장점

• prop drilling 방지
  • 중간 컴포넌트들을 거치지 않고 필요한 데이터를 직접 전달할 수 있어 문제 방지
• 전역 상태 관리 
• 간단 API (createContext, Provider, Consumer, useContext)
• 외부라이브러리 설치 불필요

3. 단점

• 성능 이슈 : Context 변경될 때마다 모든 컴포넌트가 다시 렌더링
• 중첩 Provider : 여러개의 context 사용시 provider 컴포넌트를 중첩해서 사용해야 할 수도 있어 가독성 떨어트릴수도 있음
• 너무 많은 context를 사용하면 재사용성 떨어짐
• 단방향 데이터 흐름의 복잡성 증가

4-1 Context 생성 

const MyContext = React.createContext(defaultValue);

4-2 Provider

<MyContext.Provider value={/* some value */}>
  {/* children components */}
</MyContext.Provider>

4-3 Consumer

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

4-4 useContext Hook

const value = useContext(MyContext);

 

useContext – React

 

 

예제 

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

// 1. Context 생성
const ThemeContext = createContext();

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

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

const ThemedComponent = () => {
  // 3. useContext Hook 사용
  const { theme, setTheme } = useContext(ThemeContext);

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

const App = () => (
  // 2. Provider 사용
  <ThemeProvider>
    <ThemedComponent />
  </ThemeProvider>
);

export default App;