React Hooks 4 - useContext

 

 

 

useContext

자식 컴포넌트로 데이터를 전달할 때 props를 사용.

하지만 저 밑에 있는 자식 컴포넌트에게 데이터를 전달하기 위해선 prop drilling 현상이 일어남.

prop drilling의 문제점
1. 너무 깊어지면 어디서부터 내려왔는지 파악이 어려움
2. 오류 발생 시점을 찾기 어려움

 

그래서 전역에서 데이터를 관리할 수 있는 useContext가 나옴

 

context API 필수 개념

createContext : context 생성

useContext : context를 구독하고 해당 context의 현재 값을 읽음

Provider : context를 하위 컴포넌트에게 전달

 

 

사용 방법

// FamilyContext.js

import { createContext } from "react";
export const FamilyContext = createContext(null);
// 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;

// 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;

 

 

주의 사항

리렌더링 이슈를 주의!

Provider에서 제공한 value가 달라지면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링됨