[React] Context 알아보기

리액트는 상태를 공유할 때 Props를 사용합니다.
우리가 다크 모드를 적용하려고 한다면,
자식 컴포넌트들은 최상위 App 컴포넌트로부터 Props를 전달받을 것입니다.

애플리케이션이 고도화될수록 컴포넌트는 무수히 증가합니다.
이 때, Props에 변경점이 있다면 하위 컴포넌트를 수정하고 또 수정하고...😵
이를 해결할 수 있는 Context를 오늘 알아보겠습니다.

---

🐸 Context

리액트 컨텍스트란 전역으로 데이터를 공유할 수 있도록 고안한 방법입니다.
컨텍스트를 사용하면 컴포넌트마다 Props를 넘겨주지 않아도 데이터를 사용할 수 있습니다.

🐸 Context API

// /context/ThemeContext.ts
import { createContext } from 'react';

const defaultValue = { isDark: true };
const ThemeContext = createContext(defaultValue);

export default ThemeContext;

React.createContext를 사용해서 컨텍스트를 생성할 수 있습니다.
이 컨텍스트를 구독하고 있는 컴포넌트가 렌더링될 때, 상위에서 가까운 Provider의 value를 읽어옵니다.
이 때, value가 비었다면 React.createContext에 인자로 전달한 값을 읽어옵니다.

// /app.tsx
import { ThemeContext } from './context/ThemeContext.ts';

function App() {
  return(
    <ThemeContext.Provider value={{ isDark: true }}>
    </ThemeContext.Provider>
  )
}

export default App;

Provider는 구독한 컴포넌트들에게 컨텍스트의 변화를 알리는 역할을 합니다.
value라는 prop을 받아서 이를 구독한 컴포넌트들에게 전달하고,
구독하는 컴포넌트들은 value라는 prop이 변화할 때마다 리렌더링 됩니다.

// /component/Header.tsx
import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

function Header() {
  const { isDark } = useContext(ThemeContext);
  
  return (
    <header 
      style={{
        backgroundColor: isDark ? 'black' : 'white',
        color: isDark ? 'white' : 'black';
      }}
    >
      Main header
    </header>
  )
}

export default Header;

React.useContext를 사용해서 특정 컨텍스트를 구독할 수 있습니다.

---

컨텍스트도 프로젝트가 커져 구독하는 컴포넌트들이 많아지면 리렌더링이 늘어나기 때문에 조심해야 합니다.

글을 끝까지 읽어주셔서 감사합니다.
틀린 내용이 있다면 댓글로 지적 부탁드립니다.