React Context

reference: https://www.nextree.io/context-7-3/

React Context 란?

정리하려는 React Context는 정확히 React에서 제공하는 Context API이다. React.js를 사용할 때 컴포넌트들은 부모 자식관계로 트리 구조를 가지게 되고, 데이터의 전달을 위해 props를 사용하게 된다. 컴포넌트의 수가 적으면 props로 충분한 데이터 전달이 가능하지만, 구조가 커지게 된다면 최상위 컴포넌트에서 최하위 컴포넌트까지의 데이터 이동은 많은 props 이동이 있어야하는데, 이는 직접 경험해보면 정말 불편하고 유지 보수에 큰 어려움을 준다. 이를 해결하도록 React에서 제공하는 것이 이 Context API 이다. Context를 사용하면 별도의 저장소를 두어 최상위 컴포넌트에서 최하위 컴포넌트까지 한번에 데이터 전달을 가능케 해준다.

이는 Redux와 같은 데이터 중앙 관리를 가능케 해준다. React Redux도 이 Context API를 기반한다고 한다. 둘은 거의 같게 보이지만, Redux는 Context에 비해 더 많은 기능들을 제공한다는 차이가 있다.

Context Example

Context에 데이터를 세팅하려면 React에서 제공하는 createContext를 부르면 된다.
이후, 이 컴포넌트는 Context 제공자(provider)가 된다.

import React from "react";
import data from "./data";
import { createContext } from "react";

const data = createContext("default data");

  <data.Provider value={modify data}>
    <Component1 />
    <Component2 />
    <Component3 />
  </data.Provider>

샘플 코드가 너무 대충이지만, 이와 같이 .Provider를 사용하고 value 안에 데이터를 넣는 구조를 가진다. Provider로 묶인 하위 컴포넌트들은 언제 어디서든 Context 데이터를 가져와 사용할 수 있다.

Context 데이터를 가져오는 방법은 여러가지가 있는데, 자주 쓸만한 방법 2가지를 소개한다.

1. Consumer

Consumer는 Provider와 상응한다. 이를 이용하면 Context에 저장되어 있는 전역 데이터에 접근할 수 있다. Consumer는 props로 데이터를 받게 된다.

<data.Consumer>
  {(modify data) => {
    return {modify data};
  }}
</data.Consumer>

ps. modify data는 변수가 아니라 위와 같이 그냥 적는것이다.

2. useContext

useContext는 React Hooks에서 제공하는 함수이다. 이를 통하여 더 간편하게 Context 데이터에 접근이 가능하다.

const data = useContext(/** createContext를 선언한 컴포넌트 */ );

return { data } // modify data

이와 같이 단순히 props의 교환을 하기 위해선 굳이 Redux를 사용하지 않아도 Context API를 사용하여 간편히 데이터의 전달이 가능하다. 꼭 필요한 경우에만 사용을 권장한다.