[React] Context API 란?

1. 정의

Context는 React Component 간 값을 공유할 수 있게 해주는 기능이다. 

 

보통 props를 통해서 부모에서 자식 컴포넌트에게 데이터를 전달하지만 

Context를 이용하면 부모에서 자식으로 데이터를 직접 전달하지 않아도 전역적으로 공유할 수 있게된다. 

즉,  props를 이용해서 자식에서 자식으로 연달아서 전달할 필요 없이 한번에 전달할 수 있게된다는 것 이다.

 

2. 사용법

• Context는 React 패키지에서 createContext 함수를 불러와 만들 수 있다. 

//createContext import 한다.
import { createContext } from "react";

//Context 컴포넌트 생성 
export let Context = createContext();

 

• Context 객체에는 Provider라는 컴포넌트가 들어있다. 
• 공유하고자 하는 값을 value라는 Props로 설정하면 자식컴포넌트에서 해당 값에 대해 접근가능하다.

function App() {
  return (
    <Context.Provider value="Chicken">
      <GrandParent />
    </Context.Provider>
  );
}

 

• 이제 원하는 자식컴포넌트에서 useContext라는 React Hook을 사용해 Context에 들어있는 값에 접근가능하다.

import { createContext, useContext } from 'react';

function Subpage() {
  // value 변수에 Context로 전달받은 값 저장
  const value = useContext(Context);
  // 전달 받은 값 확인 
  console.log(value);
}

 

 

• Route를 이용하는 경우는 다음과 같이 작성한다.

<Route path='/Subpage/' element={<Context.Provider value={{전달할값}}><Subpage/></Context.Provider>}/>

 

3. 기타

분명 편리해 보이는데 실제로는 잘 사용 안하는걸까?

• Context는 state 값을 변경할 때 해당 값을 사용하지 않는 것들도 무조건 재 렌더링 된다는 문제가 있다.
• 따라서 성능적인 면에서 좋지 않고, 컴포넌트의 재활용도 어려운 편이라 사용하지 않게된다.