useContext

반응 컨텍스트

React Context는 상태를 전역으로 관리하는 방법이다.
Hook과 함께 사용하면 단독으로 useState를 사용하는 것 보다 더 쉽게 중첩된 구성 요소(컴포넌트) 간에 상태를 공유 할 수 있다.

문제

상태는 상태에 대한 액세스가 필요한 스택에서 가장 높은 상위 구성 요소에 의해 유지되어야 한다.
스택의 맨 위와 맨 아래에 있는 구성 요소는 상태에 액세스해야 한다.
컨텍스트 없이 이 작업을 수행하려면 중첩된 각 컴포넌트를 통해 props로 전달해야한다. 이를 "프롭 드릴링(prop drilling)" 이라고 한다.

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 />);

구성 요소의 스택이 깊어지면 많은 컴포넌트를 거쳐야하기 때문에 props를 사용하지 않는 컴포넌트도 거쳐야 하위 컴포넌트에 도달할 수 있기 때문에 이는 매우 불편하다.

해결책

컨텍스트 생성

컨텍스트를 생성하려면 컨텍스트를 가져 createContext 오고 초기화 해야한다.

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

const UserContext = createContext();

다음으로 컨텍스트 공급자를 사용하여 상태 컨텍스트가 필요한 구성 요소 트리를 래핑한다.

컨텍스트 제공자

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

function Componene1() {
	const [user, setUser] = useState("Jack");
    
    return (
    	<UserContext.Provider value={user}>
        	<Component2 user={user} />
        </UserContext.Provider>
    )
}

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

useContext

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

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

예시

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 />);

user 상태를 사용할 컴포넌트에서 useContext를 사용하여 최상위 컴포넌트에 있는 state를 중간 컴포넌트로 props를 내려주지 않아도 도달 할 수 있게된다.