[React] PropDrilling 해결을 위한 Context api 사용 방법

prop drilling 이란

React 컴포넌트 트리의 일부로 데이터를 전달하기 위한 프로세스.

• • props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정을 말한다.

이를 해결하기 위해 React에서는 Context를 사용한다.

 

Context 생성

const MyContext = React.createContext(value);

Context Provider를 통한 데이터 공급

<MyContext.Provider value = {전역으로 전달하고자하는 값}>
{
  //context안에 위치할 자식 컴포넌트들
}
</MyContext.Provider>