React - ( React Hooks 4 - useContext )

01. useContext 소개

 

(1) react context의 필요성

우리는 일반적으로 부모 컴포넌트 → 자식 컴포넌트로 데이터를 전달해 줄 때, props를 사용했습니다.

그러나 부모 → 자식 → 그 자식 → 그 자식의 자식 이렇게 너무 깊어지게  prop drilling 현상이 일어나요.

 

prop drilling의 문제점은

1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워져요.
2. 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수밖에 없죠.

출처 : https://www.copycat.dev/blog/react-context/

 

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

 

 

(2) context API 필수 개념

• createContext : context를 생성합니다.
• useContext : context를 구독하고 해당 context의 현재 값을 읽습니다.
• Provider : context를 하위 컴포넌트에게 전달합니다.

 

 

02. 코드로 구현해보기

 

(1) useContext를 사용하지 않았을 때

구조

 

App.jsx


import "./App.css";
import GrandFather from "./components/GrandFather";

function App() {
  return <GrandFather />;
}

export default App;

GrandFather.jsx


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

function GrandFather() {
  const houseName = "스파르타";
  const pocketMoney = 10000;

  return <Father houseName={houseName} pocketMoney={pocketMoney} />;
}

export default GrandFather;

Father.jsx


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

function Father({ houseName, pocketMoney }) {
  return <Child houseName={houseName} pocketMoney={pocketMoney} />;
}

export default Father;

Child.jsx


import React from "react";

function Child({ houseName, pocketMoney }) {
  const stressedWord = {
    color: "red",
    fontWeight: "900",
  };
  return (
    <div>
      나는 이 집안의 막내에요.
      <br />
      할아버지가 우리 집 이름은 <span style={stressedWord}>{houseName}</span>
      라고 하셨어요.
      <br />
      게다가 용돈도 <span style={stressedWord}>{pocketMoney}</span>원만큼이나
      주셨답니다.
    </div>
  );
}

export default Child;

 

 

결과 화면

 

 

(2) useContext를 사용했을 때

 

#1. context > FamilyContext.js 생성

 

import { createContext } from "react";


export const FamilyContext = createContext(null);

 

 

#2. 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;

 

#3. Father.jsx 수정

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

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

export default Father;

 

#4. Child.jsx 수정

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;

 

결과화면

 

GrandFather → Context(중앙 관리소) → Child 순서로 잘 전달이 됐습니다.

 

object를 이용해서 뿌려봅니다.

<span style={stressedWord}>{data.houseName}</span>
<span style={stressedWord}>{data.pocketMoney}</span>

 

 

03. 주의해야 할 사항

useContext를 사용할 땐 늘 re-rendering issue를 주의해야 해요.

 

(1) 렌더링 문제

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