컴포넌트 간 통신

하위 컴포넌트를 변경하기

상위 컴포넌트를 변경하기

Context API, useContext

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

데이터를 Set 하는 방법

• 가장 상위 컴포넌트에서 프로바이더 사용
  

데이터를 Get 하는 방법

• 모든 하위 컴포넌트에서 접근 가능
  - 컨슈머로 하는 방법
  - 클래스 컴포넌트의 this.context 로 하는 방법
  - 함수 컴포넌트의 useContext 로 하는 방법

데이터 Set 하기

1. 일단 context를 생성합니다.
2. context.프로바이더를 사용합니다.
3. value 를 사용합니다.

연습

// PersonContext.js
import React from 'react';

const PersonContext = React.createContext(); // PersonContext context생성.

export default PersonContext;

// index.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>
);

Provider 사이에 있는 <App />이 가지고 있는 모든 컴포넌트는 가져다 쓸 수 있는 데이터를 설정할 수 있습니다.
Provider에 value 값으로 설정된 persons 는 Provider 사이에 있는 모든 컴포넌트에서 가져다가 똑같이 쓸 수 있는 객체가 됩니다.

이제 하위 컨포넌트에서 데이터를 가져다가 사용해 보겠습니다.

데이터 Get 하기

컨슈머 방식

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

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

import Example1 from "./components/Example1";

// App.js
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="">
        <Example1 />
      </header>
    </div>
  );
}

<Context.Consumer> : context 변화를 구독하는 React 컴포넌트입니다. 이 컴포넌트를 사용하면 함수 컴포넌트안에서 context를 구독할 수 있습니다.
Context.Consumer의 자식은 함수여야합니다.
이 함수는 context의 현재값을 받고 React 노드를 반환합니다.
이 함수가 받는 value 매개변수 값은 해당 context의 Provider 중 상위 트리에서 가장 가까운 Provider의 value prop과 동일합니다.
상위에 Provider가 없다면 value 매개변수 값은 createContext()에 보냈던 defaultValue와 동일할 것입니다.

클래스 컴포넌트와 함수 컴포넌트 상관없이 사용할 수 있는 범용적인 방법입니다.

this.context 방식 (클래스 컴포넌트)

순서
1. static contextType 에 컨텍스트를 설정한다.
2. this.context => value 하면 value가 나옵니다.

// Example2.jsx
import React from "react";

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

// 위의 static contextType = PersonContext; 대신에, 이 위치에 아래처럼 작성도 가능합니다. 이 방식으로 하면 함수 컴포넌트에서도 사용 가능합니다.
// Example2.contextType = PersonContext;

this.context 가 곧 persons 입니다.
이 방법의 단점은 static contextType 은 여러개를 지정할 수 없습니다. 그래서 만약에 persons 말고도 다른 context에서도 데이터를 가져와서 동시에 사용하고 싶다면 이 방법으로는 사용할 수 없고, 컨포넌트를 하나 더 만들어서 거기서 context를 받은 후 props로 넣어주는 복잡한 과정을 거쳐야 합니다.
그래서 별로 선호하지 않습니다.

useContext 방식 (함수 컴포넌트)

가장 많이 사용되는 방식입니다.

순서
1. useContext라는 Hook으로 context를 인자로 호출합니다.
2. useContext의 return이 value 입니다.

// Example3.jsx

import React, { 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>
  );
}

import Example3 from "./components/Example1";

// App.js
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="">
        <Example3 />
      </header>
    </div>
  );
}

이 방식으로 여러개의 Context 를 꺼내어 쓸 수 있습니다.