ContextAPI 사용하기

ContextAPI

• Context API는 React 16에서 부터 나온 리액트 내장 API
• props를 사용하지 않고 필요한 데이터(state)를 전달 할 수 있음
• 전역 상태를 컴포넌트 트리 전체에 props 없이 공유할 수 있음

---

언제 사용?

단순한 전역 상태에 사용하기 적합
테마, 로그인 정보, 모달 open/close, 언어 설정 등

전역 상태 라이브러리가 있는데 Context API 사용 이유?

• 가볍고 내장 되어 있음 -> 별도 설치 필요 없음, 외부 의존성 없이도 간단한 전역 상태 관리 가능
• 단순한 상태 공유에 충분 -> 테마, 로그인 정보, 모달, 언어 설정 등
• 코드가 직관적이고 추적하기 쉬움

하지만, 한계는 있지

• 비동기 로직 처리가 어려움
• 상태가 복잡해질수록 관리 어려움 -> 깊은 nesting, 복잡한 업데이트 로직은 한계

그래서

Context API는 단순한 전역 상태 관리에는 적합하지만,
비동기 로직, 캐시, 전역 상태가 많고 연관 관계가 많을 때, 성능(렌더 최적화) 문제 생길 때는 전역 상태 라이브러리 사용하는게 적합

---

어떻게 사용?

1. Context 생성

import { createContext } from "react";

export const MyContext = createContext<타입>(전달할 데이터 초기값);

// 초기값 null이 권장
export const MyContext = createContext<타입 | null>(null);

초기값을 null로 권장하는 이유

1. 실수 방지
   → 초기값을 넣으면 실수로 Provider 없이 사용해도 에러는 안남, 하지만 내부 동작은 꼬일 수 있음
2. Provider 필수 사용을 강제할 수 있음
   → Provider 안에서 동작되도록 강제 → 그래서 Context 설정을 잘못해도 에러를 내뱉어서 빠른 디버깅 가능
3. 초기값 없이 동작하게 하고 싶을 때
   → 실제 상태나 함수는 Provider에서만 만들어지고 전달됨

2. Provider 컴포넌트 생성

import { useState } from "react";
import { MyContext } from "./MyContext";

export const MyProvider = ({ children }: { children: React.ReactNode }) => {
  const [value, setValue] = useState("Hello Context");

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

3. Provider로 감싸기

import { MyProvider } from "./MyProvider";
import App from "./App";

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

4. Context 사용하기

import { useContext } from "react";
import { MyContext } from "./MyContext";

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};