useContext(Context API) 사용해보기

이 글은 팀스파르타 리액트 숙련 학습 자료 강의를 정리한 글입니다

useContext는 전역상태관리를 할 때 사용한다

context API 필수 개념

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

사용해보기

src > context > FamilyContext.js 생성

import { createContext } from "react";

export const FamilyContext = createContext(null);

데이터를 Provider 해줌

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;

useContext 사용해 데이터를 받아와서 사용

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

function Child({ houseName, pocketMoney }) {

  const data = useContext(FamilyContext);

  return (
    <div>
      나는 이 집안의 막내에요.
      <br />
      할아버지가 우리 집 이름은 <span>{data.houseName}</span>
      라고 하셨어요.
      <br />
      게다가 용돈도 <span>{data.pocketMoney}</span>원만큼이나
      주셨답니다.
    </div>
  );
}

export default Child;

주의사항

useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링된다! 따라서 value를 항상 신경써줘야 함!