[React] 컴포넌트간 통신 / Context API / provider / consumer / useContext

 

기존 구린 방법

1. 하위 컴포넌트 변경하기 (A의 버튼을 눌러서 B, C, D를 거쳐 E에 있는 값을 변경)

2. 상위 컴포넌트 변경하기 (E의 버튼을 눌러 역으로 D,C,B 를 거쳐 A에 있는 값을 변경)

각 함수들에 props를 인자로 받아서, B,C,D,E로 넘겨주어야 했다.

 

이문제를 해결하기 위해 useContext를 사용하기로 했다.

 

1. 하위 컴포넌트 전체에 데이터를 공유하는 방법

데이터를 set 하는 놈 = 가장 상위 컴포넌트 => provider
데이터를 get 하는 놈 = 모든 하위 컴포넌트에서 접근 가능

 1) consumer

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

export default function Example1() {
  return (
    <PersonContext.Consumer>
      {(persons) => (
        <ul>
          {persons.map((person) => (
            <li>{person.name}</li>
          ))}
        </ul>
      )}
    </PersonContext.Consumer>
  );
}

 2) class컴포넌트에서 get (비선호)

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

export default class Example2 extends React.Component {
  static contextType = PersonContext;
  render() {
    const persons = this.context;
    return (
      <ul>
        {persons.map((person) => (
          <li>{person.name}</li>
        ))}
      </ul>
    );
  }
}

 3) funtional 컴포넌트에서 get (최근 선호되는 방식)

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

export default function Example3() {
  const persons = useContext(PersonContext);
  return (
    <ul>
      {persons.map((person) => (
        <li>{person.name}</li>
      ))}
    </ul>
  );
}