[TIL] useContext

useContext 란?

👉 useContext는 구성 요소의 컨텍스트를 읽고 구독할 수 있게 해주는 React Hook입니다 .

일반적으로 부모 컴포넌트에서 자식 컴포넌트로 value를 전달할 때 props를 사용한다. 그러나 부모 → 자식 → 자식의 자식 이렇게 너무 깊어지게 되면 prop drilling 현상이 일어나게 된다.

prop drilling의 문제점
1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어렵다.
2. 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦어진다.

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

context API 필수 개념

• createContext : context 생성

• Consumer : context 변화 감지

• Provider : context 전달(to 하위 컴포넌트)

  
  

useContext() 사용 방법

GrandFather → Father → Child 로 값을 전달하는 예시

1. context > FamilyContext.js 생성

// FamilyContext.js
import { createContext } from "react";

export const FamilyContext = createContext(null);

2. GrandFather.jsx 수정

// GrandFatehr.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를 제거!)

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

function Father() { // props를 넘겨 줄 필요가 없다.
  return <Child />;
}

export default Father;

4. Child.jsx 수정

// Child.jsx
import React, { useContext } from "react";
import { FamilyContext } from "../context/FamilyContext";

function Child() {
  const data = useContext(FamilyContext);
  console.log(data); // 객체가 출력된다.
  return (
    <div>
      저희 집 이름은 {data.houseName} 이고, 저의 용돈은 {data.pocketMoney}
      입니다.
    </div>
  );
}

export default Child;

주의사항

useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 되므로 value 부분을 항상 신경써줘야 한다.
-> Memoization을 통해 해결 가능 or Redux