TIL 34 | React Context API

Props의 문제점

일반적인 React 애플리케이션에서 데이터는 위에서 아래로 즉, 부모로 부터 자식에게 props를 통해 전달 되지만, 애플리케이션 안의 여러 컴포넌트를 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. 그러므로 Context API를 이용하면 트리 단계 마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

Context API

React Context API는 컴포넌트 트리 안에서 전역적(global)하게 공유할 수 있도록 고안된 방법이다.
Context를 사용하여 컴포넌트 트리에 데이터를 공급 (provider)하거나, 수요(consumer) 할 수 있도록 설정하여 데이터 관리를 보다 수월하게 할 수 있다.

Context API 적용

React.createContext

context 객체를 만든다. context는 구독하고 있는 컴포넌트를 렌더링 할 때 React 트리 상위에서 가장 가까이 있는 공급자 (provider)로 부터 현재값을 읽는다.

const myContext = React.createContext(defaultValue);

📝 Default Value

• Default Value는 트리 안에서 적절한 Provider를 찾지 못했을때만 쓰는 값이다.
• 만약 Provider를 통해 undefined 값을 보낸다고해도 Default Value를 읽지 않는다.

Context.Provider

Context 객체에 포함된 React 컴포넌트인 Provider는 Context를 구독하는 컴포넌트들에게 context 변화를 알려준다.

Provider는 Value Props를 받아서 하위에 있는 컴포넌트에게 전달한다. Provider 하위에서 Context를 구독하고 있는 모든 컴포넌트는 Provider의 value Props가 바뀔 때마다 다시 리렌더링 된다.

<mythContext.Provider value={/* ... */}>

Context.Consumer

Context 변화를 구독하는 React 컴포넌트 이다. 함수 컴포넌트 안에서 Context를 읽이 위해서 쓸 수 있다.

<MyContext.Consumer>
  {value => /* context 값을 이용한 렌더링 */}
</MyContext.Consumer>

Reference

Context →(SITE)