useContext(Context API)

데이터 전달해줄 때 너무 깊어지면 prop driling현상이 일어남
prop가 어떤 컴포넌트로부터 왔는지 파악이 어려워지고, 오류가 나면 대처가 늦어지게 됨

 

필수 개념

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

(src/context/FamilyContext.js)

import { createContext } from "react";

export const FamilyContext = createContext(null);

나중에 props로 주입하는 하위컴포넌트들에서 사용할 수 있음.

return을 해줄 때 해당 컴포넌트를 로 감싸서 내려줌

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

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

  return (
    // FamilyContext밑으로 Provider제공해준다
    <FamilyContext.Provider value={{ houseName, pocketMoney }}>
      <Father />
    </FamilyContext.Provider>
  );
}

export default GrandFather;

주의해야 할 사항!

렌더링 문제. 받아서 쓰고있는 하위컴포넌트가 싹다 리렌더링 됨