부모에서 자식까지 일일이 Prop전달하기 싫을 때?

가끔 React로 코딩하다보면 부모의 state나 함수를 자식의 자식의 자식...에게 전달해야 할 때가 있다.

그러면 코드도 복잡해지고 가독성이 떨어지는데 이를 해결할 수 있는게 바로 Context이다.

 

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도
컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

리액트 공식 홈페이지에 Context란에 가보면 이렇게 설명해준다.

우리는 언제 Context를 쓸 지(일일이 전달하기 번거로울 떄)를 정했으니 어떻게 쓰는지 알아보자.

 

Context 생성하고 사용해보기

Context를 생성하려면 React.createContext API를 사용하면 끝이다.

const MyContext = React.createContext(defaultValue) 이게 다이다. 그럼 이제 사용해보자

 

<MyContext.Provider value={값}>

<App/>

<MyContext.Provider />

이렇게 선언해주면 우린 App컴포넌트 안에 있는 모든 자식요소에서 value의 값을 사용할 수 있다.

 

App 컴포넌트에서 사용한다면 App.contextType = MyContext로 사용할 수 있다.

 

공식 홈페이지에 살펴보면 Context를 이용한 다른 API와 주의할 점이 설명되어있는데,

자세한 정보를 원한다면 방문해서 읽어보길 바란다.

https://ko.reactjs.org/docs/context.html