[23.11.08] 오늘의 TIL (useContext)

useContext

단계마다 일일이 props 를 넘겨주지않아도 컴포넌트 트리 전체에 데이터를 제공하는 React Hook

useContext 의 필요성

일반적으로 데이터를 전달해줄때는 props 를 통해서 전달해주었는데
부모 → 자식 → 그 자식 → 그자식의 자식 이렇게 전달하는 방식을 prop driling 이라고 한다.
하지만 이렇게 prop driling 를 통해서 전달하는 데이터가 많아지면 많아질수록 문제점이 발생하는데

prop driling 의 문제점

1. 깊이가 깊어질수록 prop이 어떤 컴포넌트로부터 왔는지 파악하기가 어려워진다.
2. 컴포넌트에서 오류가 발생할 경우 1번의 문제점으로 인해 대처가 늦어진다.

이 문제점들은 context API를 활용하거나, 상태관리 라이브러리를 사용하여 해결이 가능하다.

context API 필수 개념

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

---

예시코드

import { createContext } from "react";
export const FamilyContext = createContext(null);

사용할 context를 생성해준 뒤 초기값 null 설정

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;

전달해줄 데이터를 Provider 를 통해 context에 저장

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;

useContext를 통해서 context에 저장해둔 데이터를 가져온다.

---

주의사항

useContext 를 사용할 때 Provider 에 저장한 vaule의 값이 변경된다면 useContext 를 사용하고 있는 모든 컴포넌트가 리렌더링 되므로 신경써서 작성해야한다.