리액트 숙련 React Hooks - useContext(Context API)

일반적으로 부모컴포넌트 → 자식 컴포넌트로 데이터를 전달해 줄 때 

props

를 사용했다. 그러나 부모 → 자식 → 그 자식 → 그자식의 자식 이렇게 너무 깊어지게 되면 prop drilling 현상이 일어난다. 

 

 

prop drilling의 문제점은

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

출처 : https://www.copycat.dev/blog/react-context/

Your Guide To The React Context API - CopyCat Blog

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

 

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

 

 

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

 

구조는 다음과 같다

 

 

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;

<FamilyContext.Provider value={{houseName, pocketMoney}} 형태로 Father 컴포넌트에 데이터를 내려준다. 

 

 

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

Child.jsx에서 console.log를 찍어보면 

이와 같이 오브젝트 형식으로 나오게 된다. 

 

 

 

# 주의해야 할 사항

• useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다. 따라서 value 부분을 항상 신경써줘야 함
• 메모이제이션이 해결 방법이 됨