Context API 기본 사용법 참고

1. Context 생성

• createContext를 사용하여 컨텍스트를 생성
• 초기값을 설정할 수 있으며, 타입스크립트를 사용할 경우 타입을 지정

import React, { createContext } from "react";

const MyContext = createContext(null); // 초기값 설정

2. Provider 컴포넌트 생성

• provider는 컨텍스트 값을 하위 컴포넌트에 전달하는 역할을 함
• 상태와 상태를 변경하는 함수를 정의하고, Provider의 value 속성에 전달

import React, { useState } from "react";

export const MyProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [state, setState] = useState("initial value");

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

3. Consumer 또는 useContext 훅 사용

• 컨텍스트 값을 사용하려면 useContext 훅 사용
• 커스텀 훅 만들어서 사용하는 것이 일반적

import { useContext } from "react";

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

4. 컨텍스트 사용

• Provider로 컴포넌트를 감싸고, useContext 훅을 통해 값을 사용

import React from "react";
import { MyProvider, useMyContext } from "./MyContext";

const MyComponent = () => {
  const { state, setState } = useMyContext();

  return (
    <div>
      <p>Current state: {state}</p>
      <button onClick={() => setState("new value")}>Change State</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;