React를 기본으로 정리해 보았다【12】【React Context】

React Context란?

React Context 는 부하의 자식 컴퍼넌트에 데이터를 건네주는 편리한 방법으로, 종래는 props 를 사용하는 것으로, 자식 컴퍼넌트에 데이터를 건네주고 있었지만, 컴퍼넌트의 중첩이 깊어지면 매우 번거롭고 복잡해진다 . Context 를 사용하는 것으로 인증이나 UI 테마 등 많은 컴퍼넌트가 사용하는 정보를 공유해 보관 유지·취득할 수 있다.

왜 Context를 사용하는가?

React Context 를 사용하면(자), 컴퍼넌트 트리의 지정한 부분으로, 공통으로 사용할 수 있는 데이터 스토어를 간단하게 구현할 수 있어 스테이트 (state, 상태)를 그대로 사용할 수도 있다.
그러나, 예를 들면, 부모 노드에서 정의한 상태를 손자 노드에서 변경하려고 하면, 변경의 요구를 손자로부터 부모의 부모에게 전달하지 않으면 안 되는 경우가 나온다. 이것은 번거롭고, 구조도 복잡해져, 메인터넌스하기 어려운 코드가 되는 경우가 많다.

그래서 Context를 준비한다. Context 로부터 데이터를 취해 사용해, 변경이 필요하면 거기서 실시하도록(듯이) 한다.

Context API에서 등장하는 사물과 역할

React 에서는 Context 를 사용할 수 있도록 하기 위한 구조가, 「Context API」로서 준비되어 있다. Context 객체를 만들려면 createContext() 함수를 호출한다.
Context 에는, 관련지을 수 있었던 「프로바이더(Provider)」와 「컨수머(Consumer)」가 있다.

Provider의 역할은 크게 두 가지이며, 「컨텍스트의 적용 범위를 결정하는 것」「컨텍스트에 데이터를 놓는 것」이다.

Consumer는 컨텍스트에서 데이터를 검색하고 사용하는 데 사용됩니다. 컨슈머에서 컨텍스트로부터 데이터 변경용의 정보도 건네받으면, 데이터의 갱신을 할 수도 있게 된다.

Provider의 기본 구현

Context 객체의 작성과 Provider 의 기본형은 다음과 같이 된다.

sample.js

import React, { createContext } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

const fruits = ['Apple', 'Orange', 'Banana'];
export const FruitContext = createContext();

ReactDOM.render(
  <React.StrictMode>
    <FruitContext.Provider value={{ fruits }}>
      <App />
    </FruitContext.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

7 행째에서 useContext() 함수를 사용해 Context 객체를 작성한다.
※나중에 Consumer 로 참조하므로 export 한다.
11행과 13행에서 App 요소를 둘러싼다.
이렇게하면 컨텍스트의 범위가 구성 요소 트리의 App보다 작습니다.
또 11 행째로, value property에, 데이터 소스가 되는 배열을 건네준다.

Consumer의 기본 구현

프로바이더측에서 문맥에 세트 한 데이터 (여기에서는 fruits)는, Consumer 로 받을 수가 있다.

sample.js

import React from 'react';
import './App.css';
import { FruitContext } from './index';

function App() {
  return (
    <FruitContext.Consumer>
      {(value) => {
        const { fruits } = value;
        console.log(fruits); // ["Apple", "Orange", "Banana"]
        return (
          <h1>...</h1>
        )
      }}
    </FruitContext.Consumer>
  );
}
export default App;

7행에서 15행째로 Consumer를 사용한다.
8 행의 애로우 함수의 파라미터로서, Provider 측에서 value 프로퍼티에 건네준 오브젝트가 건네진다.
9 행에서 분할 할당을 사용하여 value에서 fruits를 검색합니다.

useContext 후크를 사용한 Consumer의 기본적인 구현

게다가 useContext 훅을 사용하면, Consumer 가 간단하게 걸릴 수 있다.

sample.js

import React, { useContext } from 'react';
import './App.css';
import { FruitContext } from './index';

function App() {
  const { fruits } = useContext(FruitContext);
  console.log(fruits); // ["Apple", "Orange", "Banana"]
  return (
    <h1>...</h1>
  );
}
export default App;

FruitContext.Consumer 요소를 작성하지 않아도, useContext 훅을 사용하는 것으로, Consumer 에 건네지는 value 를 즉시 취득할 수 있다.

참고 사이트

【레터 반환】React Context에 대해서
Everything you need to know about React’s Context API
AWS Amplify의 Cognito 액세스는 React Context.Provider를 사용하여 인증 프로세스를 Hooks화합니다.
React Context란?