[React Context Api] 리액트에서 데이터를 자유롭게 주고받는 법.

프론트앤드 개발을 하다보면 각 컴포넌트간의 데이터 교환을 해야하는 상황이 정말 많다. 가장 보통은 props로 하위 컴포넌트에 데이터를 전달해 주는 방식을 택할 것이다.

다만 전달하려는 데이터가 컴포넌트의 하위의 하위에서만 쓰인다면 props는 한 곳에서 사용되기 위하여 여러개의 컴포넌트를 거쳐야 할 것이다.

혹은 전달하려는 데이터가 여러 컴포넌트에서 필요로 하는 정보라면 같은 데이터를 각각의 컴포넌트에 중복적으로 내려주어야 할 것이다.

물론 상태관리 시스템을 이용하여 데이터를 저장하는 것도 하나의 방법이지만, 이러한 불필요한 공수를 줄이기 위해 react에서 직접 기본기능으로 제공하는것이 있었으니 바로 react context이다.

- context 사용 시, 장점

react context를 이용하면 일일이 props를 넘겨주지 않더라도 여러 컴포넌트들이 데이터 값을 공유하며 사용할 수 있다. 즉, 모든 컴포넌트를 통하지 않고 깊숙한 곳까지 데이터 전달이 가능하며, 중복되는 코드의 사용도 줄일 수 있다.

 

- context 사용 시, 고려해야 할 부분

context를 사용하게 되면 컴포넌트의 재사용이 어려워진다.

 

- context 사용 방법

const MyContext = React.createContext(defaultValue);

먼저 context의 객체를 선언한다. 선언된 context 객체를 구독하고 있는 컴포넌트를 랜더링 할 때, react는 가장 가까이에 있는 컴포넌트Provider로부터 값을 읽어온다.

defaultValue 값은 적절한 Provider를 찾지 못했을 때, 사용되는 기본값이다. 알아두어야 할 점은 undefined로 값을 보냈을 시, 값을 받은 것으로 체크하여 defaultValue는 체크되지 않는다.

그럼 Provider란 무엇일까.

<MyContext.Provider value={/* 어떤 값 */}>

context 오브젝트에 포함된 react 컴포넌트인 Provider은 context를 구독하는 컴포넌트들에게 변화를 알리는 역할을 한다. Provider 컴포넌트는 value props를 받아 하위 컴포넌트에 전달하게 되는데, Provider 하위에 또다른 Provider을 배치하는 것이 가능하며, 이 경우에는 하위 Provider 값이 우선된다. 값을 전달 받을 수 있는 컴포넌트의 수는 제한이 없다.

context를 구독하는 컴포넌트들은 Provider의 value props가 바뀔 때마다 재랜더링 된다. 

context 값의 바뀌었는지 여부는 Object.is와 동일한 알고리즘을 사용해 이전 값과 새로운 값을 비교해 측정된다. 그러기 때문에 객체를 value로 보내는 경우 제대로 변화값을 체크하지 못할 수도 있으니 지양하자.

 

- context.consumer

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

context.consumer 컴포넌트를 사용하면 함수 컴포넌트 안에서 context를 구독할 수 있다. 이때 context.consumer의 자식은 함수여야한다. 이 함수는 context의 현재값을 받아 react 노드를 반환한다.

함수가 받는 값은 상위 트리에서 가장 가까운 Provider의 value를 받아오며, 상위에 설명한 것 처럼 Provider가 없을 시, defaultValue값을 받아온다.

 

- context.displayName

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

displayName 속성을 설정하면 개발자도구에서 설정한 문자열을 보여준다.

<MyContext.Provider> // "MyDisplayName.Provider" in DevTools
<MyContext.Consumer> // "MyDisplayName.Consumer" in DevTools