useContext

useContext

• Context는 꼭 필요할때만!!
  • Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있음
• Context의 주된 목적
  • 다양한 레벨에 있는 많은 컴포넌트들에게 전역적인 데이터를 전달하기 위함
  • 단지 Prop drilling을 피하기 위한 목적이라면 Component Composition(컴포넌트 합성)을 먼저 고려해보는 것이 좋음

// ThemeContext.js

import { createContext } from 'react';

export cont ThemeContext = createContext('hello')
// Provider가 사용되지 않을 때 초기값으로 사용되는 값(여기서는 hello)

// App.js

import { useState } from 'react';
import { ThemeContext } from './context/ThemeContext';
import Page from './components/Page';

function App() {
  const [isDark, setIsDark] = useState(false);
  
  return (
    <ThemeContext.Provider value={{isDark, setIsDark}}>
      <Page isDark={isDark} setIsDark={setIsDark} />
    </ThemeContext.Provider>
  );
}

export default App;