React

useContext

React Context는 전 세계적으로 상태를 관리하는 방법이다.

useState Hook과 함께 사용하면 useState 단독으로 사용하는 것보다 더 쉽게 깊이 중첩된 구성 요소 간에 상태를 공유할 수 있다.

문제

상태는 상태에 액세스해야 하는 스택의 가장 높은 상위 구성 요소에 의해 유지되어야 한다.

설명하자면, 중첩된 구성 요소가 많이 있다.
스택의 상단과 하단에 있는 구성 요소는 상태에 액세스해야 한다.

컨텍스트 없이 이를 수행하려면 중첩된 각 구성 요소를 통해 상태를 “props”로 전달해야 한다.
이것을 “프롭 드릴링”이라고 한다.

예제

중첩된 구성요소를 통해 “props” 전달

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </>
  );
}

function Component2({ user }) {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 user={user} />
    </>
  );
}

function Component3({ user }) {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 user={user} />
    </>
  );
}

function Component4({ user }) {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 user={user} />
    </>
  );
}

function Component5({ user }) {
  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

해결책

해결책은 컨텍스트를 만드는 것이다.

컨텍스트 생성

컨텍스트를 만들려면 createContext를 가져와 초기화해야 한다.

import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext()

다음으로 Context Provider를 사용하여 상태 Context가 필요한 구성 요소 트리를 래핑합니다.

컨텍스트 제공자

컨텍스트 공급자에서 하위 구성 요소를 래핑하고 상태 값을 제공한다.

예제

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  );
}

이제 이 트리의 모든 구성 요소는 사용자 컨텍스트에 액세스할 수 있다.

useContext 훅 사용

자식 구성 요소에서 컨텍스트를 사용하려면 useContext 훅을 사용하여 컨텍스트에 액세스해야 한다.

먼저 가져오기 문에 useContext를 포함한다.

import { useState, createContext, useContext } from "react";

그런 다음 모든 구성 요소에서 사용자 컨텍스트에 액세스할 수 있다.

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

전체 예시

React Context를 사용한 전체 예제는 다음과 같다.

예제

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}

function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  );
}

function Component4() {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 />
    </>
  );
}

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기