Context API

부모 이상의 조상 component의 state를 사용하기 위해서는 조상으로부터 자식 component에게 계속해서 props를 전달해야하는 문제가 있음. 굉장히 번거롭기 때문에 state를 공유하는 기법을 별도로 제공함.

---

Context API (https://react.dev/reference/react#context-hooks)

react 자체적으로 제공하는 state 공유 hook.

 

사용법

공유하고자하는 최상위 component에서는 createContext를 호출하여 state를 context화 한다.

// App.js를 예제로 함

import { createContext } from 'react';

export let TestContext = createContext();

function App() {
  let [testState, setTestState] = useState('testValue');
  
  return (
    ...
    <TestContext.Provider value={ { testState } }>
      ... 공유 대상 component 호출
    </TestContext.Provider>
...

공유받은 자식 component에서 context의 state에 접근하는 방법은 아래와 같다.

// 자식 component에서
import { useContext } from 'react';
// Context 공유를 App.js에서 했기 때문에 App.js를 지정한 것임
import { TestContext } from './../App.js'; 

function ChildComponent (props) {
  let { testState } = useContext(TestContext);
  
  return <div>{ testState }</div>
}

---

하지만

Context API는 아래와 같은 문제로 인해 실제로는 잘 사용하지 않고, redux 등 외부 라이브러리를 통해 공유 state를 관리한다.

• Context 대상 state가 변경되면 관련 모든 component가 re-rendering 된다. (성능 문제 야기)
• 자식 component가 context를 참조하는 경우 부모 component와의 종속성이 강해져 재사용이 어려워진다.