React Hooks - useContext(Context API)란 무엇인가?

useContext란?

 

1. react context의 필요성

리액트에서 부모 ->자식 컴포넌트로 데이터를 전달해 줄 때 

부모->자식->자식->자식 이런 식으로 너무 깊이가 깊어지면, prop drilling 현상이 일어난다.

 

prop drilling의 문제점은

 

깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워지고,

어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수 밖에 없다.

그래서 등장한 것이 바로 react context API라는 것이다.

useContext hook을 통해 우리는 쉽게 전역데이터를 관리할 수 있게 되었다.

 

useContext 필수 개념

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

사용방법

 

 

1. FamilyContext.js 파일을 만들어 Context를 생성한다.

import { createContext } from "react";


export const FamilyContext = createContext(null);

 

 

2. GrandFather.jsx 파일을 만들어 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;

 

Father.jsx

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

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

export default Father;

 

3. Child.jsx 파일에서 useContext를 이용해 값을 불러온다.

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;