기존에는 위와 같이 부모컴포넌트에서 자식컴포넌트로 props를 전달했으나, 단계가 많아질수록 이 과정이 번거로워 진다. Context를 이용하면 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 props값을 공유하도록 설정할 수 있다.
import { createContext } from 'react'; // Context를 만들기 위해 호출
------------------------------------------------------------------------
import { useContext } from 'react'; // Context를 사용하기 위해 호출createContext ☞ 다른곳에서 Context를 사용하기 위해 새로운 Context를 생성하기 위한 호출
uscContext ☞ Context를 사용할 컴포넌트에서 호출
const (변수명) = createContext(value);context객체 생성
<(변수명).Provider value={state}>
<Component1/>
<Component2/>
</(변수명).Provider>provider는 정의한 context를 하위컴포넌트로 전달하는 역할을 하며 전달하는 변수는 꼭 value를 사용해야 한다.
전달받는 컴포넌트의 제한이 없고 provider에 하위 provider배치가 가능하며 그 경우 하위 provider값이 우선시된다.
