[react-native] Context API

공식 문서, 처음 배우는 리액트 네이티브

https://ko.reactjs.org/docs/context.html#gatsby-focus-wrapper

[Context – React

A JavaScript library for building user interfaces

ko.reactjs.org](https://ko.reactjs.org/docs/context.html#gatsby-focus-wrapper)

일반적인 리액트 어플에서 데이터는 부모에서 자식으로(위에서 아래로) props를 통해 전달되지만, 어플 안의 여러 컴포넌트들에게 전해줘야 하는 값의 경우 이 과정이 번거로워진다. context를 이용하면, 각 단게마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

언제 context를 써야 할까

context는 리액트 컴포넌트 트리 안에서 전역적이라 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있다(나는 과목 숫자를 입력하기 위해서).

사용 전 고려할 것

주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것. 컴포넌트를 재사용하기 어려워지므로, 꼭 필요할 때 사용하자.

API

create Context

Context 객체를 만든다. 생성된 context 오브젝트는 입력된 기본값 외에도 consumer 컴포넌트와 provider 컴포넌트를 갖고 있다.

const MyContext = React.createContext(defaultValue);

Provider

Provider로부터 context의 현재 값을 읽고 컴포넌트들에게 변화를 알리는 역할을 한다.

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

Consumer

context의 변화를 구독하는 컴포넌트. 이 컴포넌트를 사용하면 함수 컴포넌트 안에서 context를 구독할 수 있다. 자식이 반드시 함수여야 하고, context의 현재 값을 받고 react 노드를 반환한다. value 매개변수의 값은 해당 context의 provider 중 상위 트리에서 가장 가까운 provider의 value prop과 동일하다.

상위 컴포넌트 중 가장 가까운 곳에 있는 provider 컴포넌트가 전달하는 데이터를 이용한다. 상위 컴포넌트 중 provider 컴포넌트가 없다면 생성되었을 당시 기본값을 사용한다.

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