240818 React useContext

신한별·2024년 8월 17일

💪 매일 기록

목록 보기

57/97

01. useContext

(1) useContext의 필요성

prop drilling의 대항마 😎
useContext hook 을 통해 전역 데이터를 관리할 수 있게 되었습니다. 감사합니다.
=> 하지만 무조건 전역 상태라고 할 수 없다. Proivder에서 어떤 값을 주입하느냐에 따라 부분 전역이 될 수 있다.

출처

(2) context API 필수개념 📌

createContext : context를 생성
useContext : context를 구독하고 해당 context의 현재 값을 읽음
Provider : context를 하위 컴포넌트에게 전달

02. 코드로 구현해보기

(1) useContext를 사용하지 않았을 때

App.jsx
export가 매우 중요하다

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

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컴포넌트를 거칠 수 밖에 없었다. 고작 만원 주면서...
아무튼 비효율적이다. 중간 전달책이 더 많아지면 귀찮아질 것 같다.
이럴 때 useContext를 써준다.

(2) 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"; // 1. import 

function GrandFather() {
  const houseName = "스파게티 하우스";
  const pocketMoney = 10000;

  return (
    <FamilyContext.Provider value={{ houseName, pocketMoney }}> // 2. 프로바이더 어쩌고 
      <Father />
    </FamilyContext.Provider>
  );
}

export default GrandFather;

Father.jsx 수정 (props 쫓아내기)

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"; // 1. import

function Child({ houseName, pocketMoney }) { 
  const stressedWord = {
    color: "red",
    fontWeight: "900",
  };

  const data = useContext(FamilyContext); // 2. useContext 선언
  console.log("data", data);

  return (
    <div>
      나는 이 집안의 막내에요.
      <br />
      할아버지가 우리 집 이름은{" "}
      <span style={stressedWord}>{data.houseName}</span> // 3. useContext 사용
      라고 하셨어요.
      <br />
      용돈은 <span style={stressedWord}>{data.pocketMoney}</span>원 밖에 안
      주셨습니다. 요즘 물가를 잘 모르시는듯해요.
    </div>
  );
}

export default Child;