2022.08.14 - 컴포넌트간 통신, context API, useContext

1. 하위 컴포넌트 변경하기

  - 상위 컴포넌트에서 하위 컴포넌트에서 쓰이는 state의 값을 변경 하는 경우

  - A컴포넌트(버튼) -> B컴포넌트 -> C컴포넌트 -> D컴포넌트 -> E컴포넌트(pros.value)

  - A의 버튼을 클릭해서 E컴포넌트에 있는 value를 변경한다.

  - 상위 컴포넌트의 state 값을 props로 내려서 변경한다.

export default function A() {
  const [value, setValue] = useState("아직 안바뀜 ");
  return (
    <div>
      <B value={value} />
      <button onClick={click}>E의 값을 바꾸기 </button>
    </div>
  );
  // 클릭
  function click() {
    setValue("E의 값을 변경 ");
  }
}
// 바뀐 값을 b가 c로 변경
function B({ value }) {
  return (
    <div>
      <p>여기는 B</p>
      <C value={value} />
    </div>
  );
}
function C({ value }) {
  return (
    <div>
      <p>여기는 C</p>
      <D value={value} />
    </div>
  );
}

function D({ value }) {
  return (
    <div>
      <p>여기는 D</p>
      <E value={value} />
    </div>
  );
}

function E({ value }) {
  return (
    <div>
      <p>여기는 E</p>
      <h3>값 : {value}</h3>
    </div>
  );
}

 

2. 상위 컴포넌트 변경하기

  - 하위 컴포넌트에서 상위 컴포넌트의 값을 변경하는 경우

  - E컴포넌트(버튼) -> D컴포넌트 -> C컴포넌트 -> B컴포넌트 -> A컴포넌트(pros.value)

  - 상위 컴포넌트의 state 변경하는 함수 자체를 props로 전달하여 하위 컴포넌트로 내려서 하위 컴포넌트에서 최종 state 값을 변경함

export default function A() {
  const [value, setValue] = useState("아직 안바뀜 ~!");
  return (
    <div>
      <p>{value}</p>
      <B setValue={setValue} />
    </div>
  );
}

function B({ setValue }) {
  return (
    <div>
      <p>여긴 B</p>
      <C setValue={setValue} />
    </div>
  );
}

function C({ setValue }) {
  return (
    <div>
      <p>여긴 C</p>
      <D setValue={setValue} />
    </div>
  );
}

function D({ setValue }) {
  return (
    <div>
      <p>여긴 D</p>
      <E setValue={setValue} />
    </div>
  );
}

function E({ setValue }) {
  return (
    <div>
      <p>여긴 E</p>
      <button onClick={click}>클릭</button>
    </div>
  );

  function click() {
    setValue("A의 값을 변경");
  }
}

 

- state를 공유하기 위해서는 상위 컴포넌트에서 state를 정의해야함

- state값을 변경하는것을 공유하거나, state 값을 표현하기 위해 공유하는 작업에서

상위 컴포넌트에서 정의된 state를 하위 컴포넌트가 값을 변경해야하는 경우이면 setState함수를 내리고, 

상위 컴포넌트에서 정의된 state를 하위 컴포넌트에서 값을 표현해야하는 경우이면 state자체를 내린다. 

 

 

 

3. context란?

일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 

-> 일반적인 React 어플리케이션에서 데이터는 props를 통해서 부모에서 자식에게 전달 되지만,

어플리케이션 안의 여러 컴포넌트들에게 props를 전달해줘야 하는 경우

context를 이용하면 명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게 해주는 것이다.

** 한마디로 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유한다 

 

- context는 언제 사용하는가?

  context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다.

 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어가 있다.

 

- contextAPI 개념

• createContext : context 객체를 생성한다.
• Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
• Consumer : context의 변화를 감시하는 컴포넌트.

 

 

4. 데이터를 set 하기

-> context 생성하기  -> context.Provider 사용 -> value를 사용

// PersonContext.js
// 컨텍스트 생성
import React from "react";

const PersonContext = React.createContext();

export default PersonContext;

// index.js
// provider, value 사용

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";

const persons = [
  { id: 0, name: "hyo", age: 39 },
  { id: 1, name: "eun", age: 29 },
];

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

5-1. 데이터를 get 하기 / Consumer 방식

class, function 모두 범용적으로 사용할 수 있는 방식
-> context를 가져온다 -> context.consumer를 사용한다. -> value를 사용함

// context 가져오기
import PersonContext from "../contexts/PersonContext";

export default function Example1() {
  return (
    // consumer를 사용해서 안에 함수를 통해 공유하기로 한 값을 활용해서 Example1이 render할 부분을 수정한다. 
    <PersonContext.Consumer>
      {(persons) => (
        <ul>
          {persons.map((person) => (
            <li>{person.name}</li>
          ))}
        </ul>
      )}
    </PersonContext.Consumer>
  );
}

 

5-2. 데이터를 get 하기 / class component 방식

-> static contextType에 context를 설정 -> this.context = value 임

- static contextType은 여러개를 지정할 수 없음 ( 다른 데이터를 가져와 동시에 사용 불가)

// context 가져오기 
import React from "react";
import PersonContext from "../contexts/PersonContext";

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

 

 

5-3. 데이터를 get 하기 / function component 방식

-> function component 에서 useContext 훅으로 context를 호출 -> useContext의 return이 value값

- 여러개의 context를 가져다 쓸 수 있음

// context 가져오기
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>
  );
}