[React] React Hooks (useContext)

[useContext]

useContext 를 통해 전역으로 데이터를 관리할 수 있음. (데이터의 중앙저장소)

기존에는 부모 컴포넌트 -> 자식컴포넌트로 프롭스를 전달해 데이터를 전달했다면, useContext 를 이용하면 자유자재로 데이터를 받아올 수 있음.

 

Context API 필수개념

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

FamilyContext.js 생성

import { createContext } from "react";

// 여기서 null이 의미하는 것은 무엇일까요?
export const FamilyContext = createContext(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;

 

Father.jsx

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

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

export default Father;

 

Child.jsx

import React, { useContext } from "react";
import { FamilyContext } from "./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;

props 로 내려준 값을 쓴게 아닌, Context 를 이용하여 값을 받아옴.

 

주의해야할 사항

렌더링문제 : useContext를 사용할 때, Provider 에서 제공한 데이터가 달라진다면, useContext 를 사용하는 모든 컴포넌트가 리렌더링 된다.