React Hooks - useContext(Context API)

useContext 소개

전역상태관리를 위한 API 입니다.

사용방법

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

App.jsx

import "./App.css";
import GrandFather from "./components/GrandFather";
export function App() {
  return <GrandFather />;
}

export default App;

GrandFather.jsx

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

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

  return <Father houseName={houseName} pocketMoney={pocketMoney} />;
}

export default GrandFather;

Father.jsx

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

function Father({ houseName, pocketMoney }) {
  return <Child houseName={houseName} pocketMoney={pocketMoney} />;
}

export default Father;

Child.jsx

import React from "react";

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

export default Child;

GrandFather 컴포넌트는 Child 컴포넌트에게 houseName과 pocketMoney를 전달해 주기 위해 Father 컴포넌트를 거쳐서 props로 넘겨줬습니다. 단적인 예시였지만 중간 컴포넌트가 100개라면 비효율적입니다.
이제 이 예시를 useContext로 변경해 보겟습니다.

useContext를 사용했을 때

context > Familycontext.js 생성

import { createContext } from "react";

// 여기서 null이 의미하는 것은 무엇일까요?
export const FamilyContext = createContext(null);

GrandFather.jsx 수정

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;

Father.jsx 수정

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

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

export default Father;

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;

위에 console.log("data", data) 를 찍어보면

이렇게 나오게 됩니다.

<span style={stressedWord}>{data.houseName}</span>
<span style={stressedWord}>{data.pocketMoney}</span>

이렇게 작성하면 props로 중간단계를 거치지않고 전역상태로 관리할수있습니다.

3. 주의해야 할 사항

• 렌더링 문제 useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 됩니다. 따라서 value 부분을 항상 신경써줘야 합니다