[React] Hooks(3) : useContext, ~ NO Props ~ 데이터 공유

 

 

💡 props 없이 데이터를 공유해보자

 

App.jsx ➡️ GranFa.jsx ➡️ Father.jsx ➡️ Child.jsx

 

App.jsx

import "./App.css";
import GrandFa from "./components/GrandFa";

function App() {
  return <GrandFa />;
}

export default App;

 

FamilyContext.js

createContext 를 만든다.

import { createContext } from "react";

export const FamilyContext = createContext(null);

 

GranFa.jsx

데이터를 내려줄(공유할) 그랜파 파일에 FamilyContext import

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

function GrandFa() {
  const houseName = "kim";
  const pocketMoney = 10000;

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

export default GrandFa;

 

패밀리 컨텍스트로 하위 컴포넌트를 감싸준다.

Provider 는 이 하위 파일에서 데이터 사용 가능하단 뜻

 

Father.jsx 그냥 지나치는 중

import Child from "./Child";

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

export default Father;

 

Child.jsx

여기서 useContext, FamilyContext 를 사용한다.

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

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

function Child() {
  const data = useContext(FamilyContext); {/*패밀리 컨텍스트에서 받은 데이터 저장*/}

  return (
    <div>
      Child:
      <h1 style={style}>{data.houseName}</h1> {/*사용 ~*/}
      <h1 style={style}>{data.pocketMoney}</h1> {/*사용 ~*/}
    </div>
  );
}

export default Child;

 

❗️ 주의할 점

useContext 를 사용할 때, Provider = Grandfa 가 제공한 value 가 달라지면

useContext 를 사용하고 있는 모든 컴포넌트가 리렌더링된다.

그래서 value 부분을 항상 신경써야 한다.

메모이제이션이 해결책..!