Props를 이용한 데이터 전달은 Vue에서와 동일한 문제점을 공유한다. 컴포넌트 사이의 거리가 멀어지면 중간에 위치한 컴포넌트는 사용하지 않는 데이터임에도 불구하고 하위 또는 상위 컴포넌트에게 전달하기 위해서 props를 사용한다. 강의에서는 위와 같은 상황을 props drilling
이라고 설명했다. Vue에서는 이를 위해서 Provide
와 Inject
를 사용한 것처럼. React에서는 Context API
의 Context Provider
와 Context Consumer
를 사용할 수 있다.
creatContext()
를 사용해서 Context 객체를 만들 수 있다. creatContext()
의 입력으로 기본값을 설정할 수 있다.
const MyContext = React.creatContext(defaultValue)
객체에 포함된 컴포넌트 Provider
를 이용해 데이터를 전달하며, 이 데이터는 value
prop으로 지정한다. 데이터는 Provider
의 하위 컴포넌트에 전달이 가능하며, 여러 Context의 Provider
를 중첩해서 사용할 수 있다.
<MyContext.Provider value={data}>
<!-- 데이터를 전달이 필요한 하위 컴포넌트 -->
</MyContext.Provider>
Context 객체에 포함된 컴포넌트 Consumer
를 사용해 Provider
를 통해서 전달한 데이터를 사용할 수 있다. Cousumer
의 자식은 반드시 함수여야 한다. 만약 Consumer
컴포넌트의 상위 컴포넌트에 Provider
가 존재하지 않는다면 createContext()
에 입력한 기본값이 데이터로 주어진다.
<MyContext.Provider value={data}>
<MyContext.Consumer>
{value => <div>{value}</div>}
<!-- <div>data</div> -->
</MyContext.Consumer>
</MyContext.Provider>
<MyContext.Consumer>
{value => <div>{value}</div>}
<!-- <div>defaultValue</div> -->
</MyContext.Consumer>
useContext
에 Context 객체를 입력해서 Provider
의 value
값을 반환받을 수 있으며, useContext
를 호출하는 모든 컴포넌트는 Provider
의 value
props가 변경될 때 리렌더링 된다.
예시에서는 Provider
와 Consumer
컴포넌트를 사용했다. 부모-자식 관계가 아닌 두 노드가 있고 위에 있는 노드의 input에 값을 입력하면 아래에 있는 노드의 문구가 바뀌는 것을 볼 수있다.