React - Hook (2)

useContext

이전에 우리가 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달할 땐 props를 사용했다.
가장 높은 위치의 부모 컴포넌트와 가장 낮은 위치의 자식 컴포넌트 사이에 수많은 컴포넌트들이 존재하게 된다면, props drilling이라는 문제가 발생한다.

useContext hook을 사용하면 쉽게 전역 데이터를 관리할 수 있다!

사용법

1. context / FamilyContext.js 생성

import {createContext} from "react";

export const FamilyContext = createContext(null);

2. GrandFather.jsx

import Father from "./Father";
import {FamilyContext} from "...";
// FamilyContext import

function GrandFather() {
  const houseName = "스파르타";
  const pocketMoney = 10000;

  return (
  // 내려줄 정보
    <FamilyContext.Provider value={{ houseName, pocketMoney }}>
      <Father />
    </FamilyContext.Provider>
  );
}
// 원래는 props를 내려줬다.

export default GrandFather;	

3. Father.jsx

import React from "react";
import Child from "./Child";

function Father() {
  return <Child />;
}
// 마찬가지로 원래는 Child에게 props를 내려줬지만 그럴 필요 없다.

export default Father;

4. Child.jsx

import React, { useContext } from "react";
import { FamilyContext } from "../context/FamilyContext";

function Child({ houseName, pocketMoney }) {
  const stressedWord = {
    color: "red",
    fontWeight: "900",
  };

  const data = useContext(FamilyContext);
  console.log("data", data);

  return (
    <div>
      나는 이 집안의 막내에요.
      <br />
      할아버지가 우리 집 이름은 <span style={stressedWord}>{data.houseName}</span>
      라고 하셨어요.
      <br />
      게다가 용돈도 <span style={stressedWord}>{data.pocketMoney}</span>원만큼이나
      주셨답니다.
    </div>
  );
}

export default Child;

주의 사항

Provider에서 제공하는 값이 바뀌면, 모든 컴포넌트가 리렌더링 된다!