[React] Context API

Context

일반적으로 데이터를 여러 컴포넌트들에 전해줘야 하는 props의 경우 사용이 번거로울 수 있습니다. 

리액트의 Context API를 사용하면 프로젝트 내에 전역적으로 사용할 수 있는 값을 관리할 수 있습니다. 

다시 말해, Context를 사용하면 일일이 props를 넘겨주지 않아도 컴포넌트 전체에 데이터를 제공할 수 있습니다. 

데이터 다루기

HumanContext.js

import React from 'react';

const HumanContext = React.createContext();

export default HumanContext;

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import HumanContext from "./contexts/HumanContext";

const humans = [
	{id: 0, name: "Jack", age: 30},
    {id: 1, name: "Mick", age: 24},
];

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

provider는 context의 변화를 컴포넌트들에게 알리는 역할을 합니다. value prop을 받아 하위 컴포넌트에 전달합니다. provider하위에서 context를 사용하는 컴포넌트는 value가 바뀌면 다시 렌더링 됩니다. 

ExComponent.js

import HumanContext from "../contexts/HumanContext";

export default function ExComponent() {
	return (
        <HumanContext.Consumer>
            {(humans) => (
                <ul>
                    {humans.map((human) => (
                        <li>{human.name}</li>
                    ))}
                </ul>
            )}
        </HumanContext.Consumer>;
    );
}

consumer는 context를 조회할 수 있는 React Component입니다. 

자식은 함수여야 하고, 이 함수는 context의 현재 값을 받고 리액트 노드를 반환합니다. 

---

 Hook을 사용하여 데이터 가져오기

ExComponent.js

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

export default function ExComponent() {
	const humans = useContext(HumanContext);
	return (
        <ul>
            {humans.map((human) => (
                <li>{human.name}</li>
            ))}
        </ul>
    );
}

이 방법이 가장 많이 사용됩니다.  

context객체의 값을 받아 현재 값을 반환합니다.  useContext를 호출한 컴포넌트는 context값이 바뀌면 리렌더링 됩니다.