React Hooks - useContext(Context API)

박지현·2023년 2월 14일

JavaScript React 항해4주차 항해99

React 숙련

목록 보기

5/9

2023.02.10

useContext 소개

(1) react context의 필요성

일반적으로 부모컴포넌트 → 자식 컴포넌트로 데이터를 전달해 줄 때 props를 사용했다. 그러나 부모 → 자식 → 그 자식 → 그자식의 자식 이렇게 너무 깊어지게 되면 prop drilling 현상이 일어난다.

prop drilling의 문제점은

깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워진다.
어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수 밖에 없다.

그래서 등장한 것이 react context API라는 것이다. useContext hook을 통해 쉽게 전역 데이터를 관리 할 수 있게되었다.

(2) context API 필수 개념

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

코드로 구현해보기

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

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 컴포넌트를 거칠 수 밖에 없었다. 단적인 예시였지만 중간 컴포넌트가 100개라면 엄청나게 비효율이된다.

(2) useContext를 사용했을 때

#1. context > FamilyContext.js 생성

import { createContext } from "react";

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

#2. 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;

#3. Father.jsx 수정(props를 제거해요!)

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

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

export default Father;

#4. 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;