[React] context API

컴포넌트간 데이터를 주고받을때

상위 - 하위 - 하위 - 하위 같이 내리는 props 방식말고

상위 컴포넌트에서 지정한 데이터를 트리식으로 내리는방식이 아닌 하위컴포넌트에서 사용할수 있는방법

vue 에서 사용한 provider 와 같은 개념이다

데이터를 받는 방식은 두가지이다. 

consumer 방식과 useContext hook 방식이있다

 

createContext 생성 및 provider(공급자) 데이터 주입

context 로 만든 컴포넌트에 provider 로 데이터를 주입하고

데이터를 공유할 컴포넌트를 넣는다

 

Consumer 방식

상위에서 만들어진 context 를 import 해온후 provider 와 마찬가지로

Consumer 를 써서 감싸면 상위에서 주입한 데이터를 사용할 수 있다

 

useContext 방식

useContext 를 생성한후 그 안에 상위에서 생성한 context 를 넣으면 provider 로 주입했던 데이터를 바로 사용할수있다.

Consumer 방식보다 깔끔해졌다