처음 만난 리액트 - 15(2). Context API

본격적으로 컨텍스트를 사용하기 위해 리액트에서 제공하는 컨텍스트 API를 알아보자.

 

1. 컨텍스트 생성하기 : React.createContext() 함수 사용

위 코드 작성시 컨텍스트 객체가 생성된다.

리액트에서 렌더링이 일어날 때 컨텍스트 객체를 구독하는 하위 컴포넌트가 나오면 현재 컨텍스트의 값을 가장 가까이에 있는 상위 레벨의 Provider로부터 받아오게 된다. 그런데 만약 상위 레벨에 매칭되는 프로바이더가 없다면 이 경우에만 기본값이 사용된다.

 

2. 하위 컴포넌트들이 해당 컨텍스트의 데이터를 받을 수 있도록 설정하기 : Context.Provider

모든 컨텍스트 객체는 Provider라는 React 컴포넌트를 갖고 있다.

Context.Provider 컴포넌트로 하위 컴포넌트들을 감싸주면 모든 하위 컴포넌트들이 해당 컨텍스트의 데이터에 접근할 수 있게 된다.

Provider 컴포넌트에는 value라는 prop이 있으며 이것은 Provider 컴포넌트 하위에 있는 컴포넌트들에게 전달된다.

그리고 하위 컴포넌트들이 이 값을 사용하게 되는데 이 하위 컴포넌트들이 데이터를 소비한다는 뜻에서 컨슈밍 컴포넌트라고 부른다.

컨슈밍 컴포넌트는 컨텍스트 값의 변화를 지켜보다가 만약 값이 변경되면 재렌더링 된다.

 

프로바이더 컴포넌트로 감싸진 모든 컨슈밍 컴포넌트는 프로바이더의 Value Prop이 바뀔 때마다 재렌더링 된다.

값이 변경되었을 때 상위 컴포넌트가 업데이트 대상이 아니더라도 하위에 있는 컴포넌트가 context를 사용한다면 하위 컴포넌트에서는 업데이트가 일어난다.

 

Provider value에서 주의해야 할 사항

이를 방지하기 위해서는 Value를 직접 넣는 것이 아닌 컴포넌트의 State로 옮기고 해당 State의 값을 넣어 주어야 한다.

 

Context.Consumer

컨슈머 컴포넌트: 컨텍스트의 데이터를 구독하는 컴포넌트.

context.consumer로 감싸주면 컴포넌트의 자식으로 들어간 함수(=function as a child)가 현재 컨텍스트의 value를 받아서 react node로 리턴하게 된다. (이때 함수로 전달되는 value는 프로바이더의 value prop과 동일하다)

 

function as a child

: 컴포넌트의 자식으로 함수를 사용하는 방법

React에서 기본적으로 하위 컴포넌트들을 Children이라는 프로그램으로 전달해 주는 방식 대신

 Children으로 컴포넌트 대신 함수를 사용하여 이 코드와 같이 사용할 수 있음.

 

여러 개의 Context 사용하기

여러개의 컨텍스트를 사용하고 싶다면 context.provider를 중첩해서 사용하는 방식으로 구현할 수 있다.

Context, Provider, Consumer 모두 2개씩 사용한 코드

 

 

그런데 함수 컴포넌트에서 컨텍스트를 사용하기 위해 컴포넌트를 매번 컨슈머 컴포넌트로 감싸주는 것보다 더 좋은 방법이 있다.

useContext() Hook

react.createContext 함수 호출로 생성된 컨텍스트 객체를 인자로 받아서 현재 컨텍스트의 값을 리턴하여 사용한다.

 

useContextHook을 사용하면 컨텍스트의 값을 다른 방식과 동일하게 컴포넌트 트리 상에서 가장 가까운 상위 프로바이더로부터 받아오게 되며 만약 컨텍스트의 값이 변경되면 변경된 값과 함께 useContextHook을 사용하는 컴포넌트가 재렌더링 된다.

(useContextHook을 사용할 때에는 파라미터로 context 객체를 꼭 넣어줘야 한다.)