💡 UseContext

useContext는 컴포넌트에서 context를 읽고 구독할 수 있는 Hook이다.

UseContext 사용법

MyContext.tsx

전역으로 관리하고 싶은 변수와 관리환경을 선언한다.

// Context API 설정파일

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

interface MyContextType {
  myState: number;
  setMyState: React.Dispatch<React.SetStateAction<number>>;
}

const MyContext = createContext<MyContextType | undefined>(undefined); // 컨텍스트 생성

export const useMyContext = () => {
  const context = useContext(MyContext);
  if (!context) {
    throw new Error("useMyContext must be used within a MyProvider");
  }
  return context;
};

export const MyProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [myState, setMyState] = useState<number>(0);

  return (
    <MyContext.Provider value={{ myState, setMyState }}>
      {children}
    </MyContext.Provider>
  );
};

index.tsx

전체 어플리케이션을 Context Provider로 감싼다.

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "./Router";
import { MyProvider } from "./Context/MyContext";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <MyProvider>
      <RouterProvider router={router} />
    </MyProvider>
  </React.StrictMode>
);

UseContext.tsx

Context로 선언한 변수를 가져와서 쓴다.

import { useMyContext } from "../Context/MyContext";

export default function UseContext() {
  const { myState, setMyState } = useMyContext();

  return (
    <div>
      <p>My State: {myState}</p>
      <button onClick={() => setMyState(myState + 1)}>+</button>
    </div>
  );
}