React hooks - useContext

jiny·2022년 9월 8일

React hooks

목록 보기

6/6

useContext

useContext?

context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환합니다.

context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정됩니다.

공식문서의 설명 더 자세히 살펴보자

리액트 프로젝트의 Component Tree가 다음과 같다고 가정

리액트는 단방향 데이터 바인딩으로써 최상위 -> 하위 컴포넌트에 데이터를 Props로 전달하는 방식

Props의 문제점

만약 C,E 컴포넌트에 데이터가 필요하다고 가정
C,E 컴포넌트에 데이터를 전달하려면 App -> A -> C, App -> B -> D -> E와 같은 과정이 필요
A,B,D 컴포넌트는 데이터가 필요하지도 않은데 데이터 코드를 작성(Props Drilling)
Props들이 많아지며 데이터가 복잡해지고, 코드도 더러워짐, 만약 이상한 데이터를 전달하거나 수정하게 되면 컴포넌트를 찾아다니며 수정해야함

Context

최상위 컴포넌트에서 context를 선언
context는 데이터가 필요한 컴포넌트에게 알려주는 역할

데이터가 필요한 컴포넌트들은 useContext를 통해 데이터를 가져오면 됨
이럴 경우 Props Drilling이 발생하지 않음
데이터 관계가 명확해지며, 이상한 데이터를 전달할 시 데이터를 전달 받은 컴포넌트들만 확인하면 됨

주의 사항

단지 Prop Drilling을 피하기 위한 목적이라면 Component Composition을 고려
Context를 사용 시 컴포넌트 재사용이 어려워 질 수 있음

useContext 예제

useContext 구조

darkContext.ts

import { createContext } from "react";

export const DarkContext = createContext({});

먼저 전역 상태를 담당할 DarkContext에 createContext({}) 저장

app.tsx

import { useState } from "react";
import Page from "./component/Page";
import { DarkContext } from "./context/darkContext";

function App() {
  const [isDark, setIsDark] = useState(false);
  return (
    <DarkContext.Provider value={{ isDark, setIsDark }}>
      <Page></Page>
    </DarkContext.Provider>
  );
}

export default App;

최상위 컴포넌트 위로 DarkContext의 Provider로 감싸주는 형태
이때, Provider는 value prop이 필요
value에는 전역 상태를 저장하는 value(지금은 dark mode state와 setState를 저장)

useContext 사용

Header.tsx

import { useContext } from "react";
import { DarkContext } from "../context/darkContext";

export interface IDarkContext {
  isDark: boolean;
  setIsDark: React.Dispatch<React.SetStateAction<boolean>>;
}

const Header = () => {
  const { isDark } = useContext(DarkContext) as IDarkContext;
  return (
    <header
      className="header"
      style={{
        background: isDark ? "black" : "lightgray",
        color: isDark ? "white" : "black",
      }}
    >
      <h1>Welcome 홍길동!</h1>
    </header>
  );
};

export default Header;