[React] React context

props drilling

• 중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것
• 어떤 컴포넌트가 상위 컴포넌트의 state를 활용하려면 중간에 있는 컴포넌트도 (해당 props를 사용하지 않더라도) props를 전달받아야 한다
• 컴포넌트가 한 두개가 아니라 수십개가 넘어갈 경우 Props로 계속 상태를 넘겨주는 것은 비효율적이게 된다

export default function App({ theme }) {
  return (
    <>
      <Header theme={theme} />
      <Main theme={theme} />
      <Sidebar theme={theme} />
      <Footer theme={theme} />
    </>
  );
}

function Header({ theme }) {
  return (
    <>
      <User theme={theme} />
      <Login theme={theme} />
      <Menu theme={theme} />
    </>
  );
}

위의 예시에서 Header 는 theme를 사용할 일이 없음에도 불구하고 전달받아서 내려줘야 한다

React Context

전역 데이터(현재 로그인된 사용자 정보, 테마, 언어 등) 보관에 유용

필요한 컴포넌트만 state 접근해서 사용

1. createContext 메서드를 사용해 context를 생성

import { createContext } from 'react';
const ThemeContext = createContext('example');

2. 생성된 context를 가지고 context provider로 컴포넌트 트리를 감싸줌
   • provider로 감싸주지 않은 채 context에 접근하면 초기값을 가져옴
     
     
3. value prop을 사용해 context provider에 원하는 값을 입력

const [isDark, setIsDark] = useState(false);

return (
	<ThemeContext.Provider value={{isDark, setIsDark}}>
	...
	</ThemeContext.Provider>
);

4. useContext를 통해 필요한 컴포넌트에서 그 값을 불러옴

import { ThemeContext } from './context/ThemeContext';
import { useContext } from "react';

...
const { isDark, setIsDark }  = useContext(ThemeContext);

절대적인 해결책은 아님

• 최대한 컴포넌트를 재설계하여 props drilling 방지
  • 컴포넌트 합성을 고려해볼 것
• react context를 사용하는 컴포넌트는 해당 context 없이는 재사용 힘듦