[React] useContext

props drilling 문제를 해결!

useContext hook을 통해 전역 데이터 관리를 할 수 있게 되었다.

 

 

context API 필수 개념

• createContext : context 생성
• Consumer : context 변화 감지
• Provider : context 전달 (하위 컴포넌트에게)

 

---

사용

// context폴더 > FamilyContext.js

import { createContext } from "react";

// props로 주입하는 하위 컴포넌트들에게 사용가능
export const FamilyContext = createContext(null);

 

provider : 제공해준다.

// components폴더 > GrandFather.jsx

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

// GF => child에게 어떤 정보를 알려줘서 child가 그 내용을 출력
export default function GrandFather() {
  // child에게 알려줄 내용
  const houseName = "펜트하우스";
  const pocketMoney = 10000;

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

// components폴더 > Father.jsx

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

export default function Father() {
  return <Child />;
}

// components폴더 > Child.jsx

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

const style = {
  color: "red",
  fontWeight: "900",
};

export default function Child() {
  const data = useContext(FamilyContext);

  return (
    <div>
      할아버지께서 우리 집은 <span style={style}>{data.houseName}</span>이라고
      하셨어요. <br />
      게다가 용돈도 <span style={style}>{data.pocketMoney}</span>원이나
      주셨어요!
    </div>
  );
}

• 결과 

 

 

⭐ props로 내려준 것이 아니다!!!

 

⚠️ 주의 : 렌더링 문제
provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링된다. 

꼭!! value 부분 항상 조심!