[React] Context 란?

[Context의 배경]

일반적으로 리액트에서 컴포넌트 간 데이터 공유가 필요할 때는 state를 통해서 값을 자식 노드가 부모 노드로 올리고 props를 통해서 값을 부모 노드에서 자식 노드로 전달된다. 아래의 그림의 경우에는 1번 노드에서 5번 노드까지 값을 전달하기 위해서 1,2,3,4,5번 노드를 차례로 거치면서 값을 props를 통해서 전달해야한다. 그런데 만약 로그인된 사용자의 정보와 같이 여러 컴포넌트들에 전달해줘야 하는 props의 경우 이 과정이 꽤나 번거로울 것이다. (prop drilling)

이때 사용할 수 있는 것이 context이다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 이렇게 되면 불필요한 re-rendering도 방지할 수 있다. Provider를 통해서 어디까지 해당 데이터가 공유되게 할지 범위를 정할 수 있기 때문에 모든 데이터가 전체 노드에 필요 이상으로 공유되는 것도 방지할 수 있다.

 

[그렇다면 context를 언제 써야할까?]

Context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 현재 로그인한 유저, 테마(light/dart mode), 선호하는 언어 등 시스템 전반에 걸쳐 사용되어야 하는 값에 활용하기에 좋다.

 

[예시를 통해 보는 context 사용법]

ThemeContext.jsx  --> Context 정의

import { createContext, useContext } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({children}) {
  const [theme, setTheme] = useState('light');
  
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

export function useThemeContext() {
  return useContext(ThemeContext);
}

* 여기서는 ThemeContext.Provider 내부에 있는 children에 대해서만 theme context가 적용된다.

 

App.jsx  --> Provider로 context 유효 범위 지정

import { ThemeContextProvider } from './context/ThemeContext';

function App() {
  return (
    <ThemeContextProvider>
      <MyApp />
    </ThemeContextProvider>
  );
}

export default App;

* MyApp에 대해서만 Theme context가 적용된다.

 

MyApp.jsx  --> Context 사용

import { useThemeContext } from '../context/ThemeContext';

export default function MyApp() {
  const { theme } = useThemeContext();
  
  return (
    <div className={theme}>
      <button>{theme}</button>
    </div>
  )
}

 

 

출처: 리액트 공식 문서 https://react.dev/reference/react/useContext