useContext

useContext는 prop driling의 문제점을 보안하기 위한 방법이며, 전역 데이터라고 생각하면 된다.
사용 방법은 context폴더를 생성, 안에 context이름.js 을 생성한다.(컴포넌트라 파스칼케이스 사용)
이후 context파일에 아래와 같은 전역 데이터가 저장될 공간을 만들어 준다.

import { createContext } from "react";

export const FamilyContext = createContext(null);

이후 부모 컴포넌트를 아래와 같이 수정한다.

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

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

  return (
    <FamilyContext.Provider value={{ houseName, pocketMoney }}>
      <Father />
    </FamilyContext.Provider>
  );
}

export default GrandFather;

.Provider은 context를 전달해 주는 역할이다.

그리고 해당 context를 받을 자식 컴포넌트에서 아래와 같이 받아서 사용하면 된다.

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

function Child() {
  const { houseName, pocketMoney } = useContext(FamilyContext);

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

export default Child;

주의할 점은 Provider에서 제공한 value가 달라지면 useContext를 사용하는 모든 컴포넌트가 리렌더링 된다.

이 문제는 메모이제이션으로 해결한다.