React - useContext

useContext

우리는 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해줄 때, props를 사용했다. 그러나 부모 자식 컴포넌트간에 지나치게 많은 컴포넌트가 존재하면 prop drilling 문제가 발생한다고 했다.

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

context API 필수 개념

• createContext : context 생성
• Consumer : context 변화 감지
• Provider : context 전달

useContext 사용법

FamilyContext.js생성 ```javascript import { createContext } from "react";

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

**GrandFater.js**
```javascript
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;

위와 같이 전역적으로 다룰 props를 import하고, props를 내려줄 최상위 컴포넌트를 감싼다. 그리고 Provider 선언을 해주고, 내려줄 props를 구조분해할당하여 내려주게 된다.

Father.js

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

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

export default Father;

Child.js

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

function Child() {
  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;

역시 전역적으로 받아올 FamilyContext를 import하고, 특정 변수에 담아서 활용하면 된다. 여기서는 data라는 변수명에 할당을 하였다.

문제점

useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리랜더링되게 된다.