[React] 컴포넌트 간 통신 Context API

📌 Context

 context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로우며 비효율적일 수도 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

Context – React

 

❓그래서 context는 언제 쓰는지?

context는 React 컴포넌트 트리 안에서 전역적(global) 데이터를 공유할 때 쓰는 방식이다.

 

컴포넌트 트리 제약 -> Props drilling의 한계 해소

재사용성 -> Context를 사용하면 재사용하기 어려움

API -> craeteContext / Provider / Consumer

useContext -> Consumer 대체

 

📌 ContextAPI 사용법

데이터를 Set 하는 것

  - 가장 상위 컴포넌트 => 프로바이더

데이터를 Get 하는 것

  - 모든 하위 컴포넌트에서 접근 가능

    1. Consumer로 하는 방법

    2. class 컴포넌트의 this.context로 하는 방법

    3. functional 컴포넌트의 useContext로 하는 방법

 

👇 데이터를 Set 하기

1. Context를 생성한다.

Context라는 데이터를 넣어두는 공간을 생성한다.

import React from "react";

const PersonContext = React.createContext();

export default PersonContext;

 

2. Context.Provider를 사용한다.

Provider는 공간에 있는 값의 변경을 자식들에게 알려줄 수 있는 컴포넌트이다.

 

가장 상위 컴포넌트 index.js에 프로바이더를 해준다. 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import PersonContext from "./contexts/PersonContext.js";

const persons = [
  { id: 0, name: "Mark", age: 39 },
  { id: 1, name: "Hanna", age: 28 },
];

ReactDOM.render(
  <React.StrictMode>
    <PersonContext.Provider value={persons}>
      <App />
    </PersonContext.Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

 

3. value를 사용한다. 

 

👇 데이터를 Get 하기(1) - Consumer

1. Context를 가져온다.

2. Context.Consumer를 사용한다.

3. value를 사용한다.

 

import PersonContext from "./../contexts/PersonContext";

export default function Example() {
  // persons가 PersonContext 프로바이더에 설정된 persons와 같은 것
  return (
    <PersonContext.Consumer>
      {(persons) => (
        <ul>
          {persons.map((person) => (
            <li>{person.name}</li>
          ))}
        </ul>
      )}
    </PersonContext.Consumer>
  );
}

 

👇 데이터를 Get 하기(2) - class

1. static contextType에 Context를 설정한다. 

2. this.context => value이다

 

static contextType은 여러 개를 지정할 수 있다.

그래서 만약에 Persons 외에 다른 context에서 데이터를 동시에 가져올 수 있다. 

 

import React from "react";
import PersonContext from "./../contexts/PersonContext";

export default class Example extends React.Component {
  static contextType = PersonContext;

  render() {
    const persons = this.context;
    return (
      <ul>
        {persons.map((person) => (
          <li>{person.name}</li>
        ))}
      </ul>
    );
  }
}

 

👇 데이터를 Get 하기(3) - functional

1. useContext로 Context를 인자로 호출한다.

2. useContext의 리턴이 value이다.

 

import { useContext } from "react";
import PersonContext from "./../contexts/PersonContext";

export default function Example() {
  const persons = useContext(PersonContext);

  return (
    <ul>
      {persons.map((person) => (
        <li>{person.name}</li>
      ))}
    </ul>
  );
}