React Hooks - useContext(Context API)

React context

1. react context의 필요성

우리는 일반적으로 부모컴포넌트 -> 자식컴포넌트로 데이터를 전달해준다.

이를 props를 사용했다. 그러나 부모->자식-> 그의 자식-> 그의 자식의 자식 / 이렇게 너무 깊어지면 prop drilling 현상이 일어난다.

 

prop drilling의 문제점은

1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로 왔는지 파악이 어렵다.

2. 어떤 컴포넌트에서 오류가 발생할 경우 오류 파악이 어렵다.

 

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

Your Guide To The React Context API - CopyCat Blog

 

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

 

(2) context API 필수 개념

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

코드로 구현할 때

useContext를 사용하지 않을 때

App.jsx

import "./App.css";
import GrandFather from "./components/GrandFather";
export 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;

결과 화면은

나는 이 집안의 막내에요.

할아버지가 우리집이름은 가나다라고 하셨어요.

게다가 용돈도 10000원만큼이나 주셨어요.

 

GrandFather 컴포넌트는 Child 컴포넌트에게 houseName과 pocketMoney를 전달해주기 위해 Father 컴포넌트를 거칠 수 밖에 없었다. 단적인 예시였지만 중간 컴포넌트가 100개라면 엄청나게 비효율적이다.

useContext hook를 적용해봅시다.

 

(2) useContext를 사용했을 때

 context > 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 수정(props를 제거한다)

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 "../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;

child.jsx에서 console.log를 찍으면 

이렇게 나온다.

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

 

이제 object를 이용해서 뿌려본다.

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

결과 화면은

나는 이 집안의 막내에요.

할아버지가 우리집이름은 가나다라고 하셨어요.

게다가 용돈도 10000원만큼이나 주셨어요.

 

주의해야 할 사항

렌더링 문제

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

이를 보완하는 것은 메모이제이션이다.