본문 바로가기
Frontend/React

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

by SOLYI 2021. 11. 16.

 

기존 구린 방법

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>
  );
}

 

반응형