[React] Context 복습하기

React Context란?

컴포넌트간의 데이터를 전달하는 또 다른 방법 ,

기존의 `props`가 가지고 있던 단점( props drilling) 을 해결하기 위해 존재한다.

 

왜 필요할까?

React에선 데이터를 전달하기 위해 props를 사용하는데요

Props는 부모 -> 자식 으로만 값을 전달할 수 있습니다.

 

App -> childA 이런 경우 문제?(불편함이)되지 않음, But 

App -> childA -> childB 이런경우 App이 childB로 데이터를 전달하려면 바로 전달하지 못하고 childA 가 중간 다리 역할을 해야함

<App>
	<ChildA>
    	<ChildB />
    <ChildA>
</App>
// App 이 ChilB에 데이터를 넘기려면

<App data="hello">
	<ChildA data={data}>
    	<ChildB data={data} />  //이런걸 Props drilling 
    <ChildA>
</App>

 

그래서 childA에서 쓰지도 않는 데이터를 childB에 전달하기 위해 코드를 작성해줘야 했음(data).. 

그런데 이런 구조가 깊어지고 또 해당 규모에서 수정이 일어나게되면 엄청나게 복잡해짐..

 

그래서 React Context가 나타나게 되었다. 

 

Context 는 데이터를  중앙에서 보관하는 일종의 데이터 보관소 (객체) 라고 볼 수 있다.

즉, 데이터를 전역처럼 다룰 수 있게 해주는 공유소,

 

Context 사용하는 법

import { createContext } from "react";

// 1.Context 생성
export const StudyContext = createContext(); // App 컴포넌트 바깥에 선언,

// 2. Provider로 감싸기
<StudyContext.Provider value ={ 값 }>
	<하위 컴포넌트 />
</StudyContext.Provider>

// 3. 하위 컴포넌트에서 useContext로 사용할 수있다
const data = useContext(StudyContext);