🌐 React Context Provider

📌 개념 정리

✅ Context란?

컴포넌트 간에 데이터를 전역으로 공유할 수 있는 리액트 기능

• props drilling 없이 데이터를 여러 컴포넌트에 전달할 수 있음
• 예: 로그인 정보, 테마 설정, 필터 조건, API 데이터 등

✅ 왜 Provider를 쓰는가?

기존 방식	문제점
props를 부모 → 자식 → 손자에게 계속 전달	유지보수 어렵고, 중간 컴포넌트가 불필요한 책임을 짐
useState로만 관리	여러 파일에서 중복되거나 비효율적일 수 있음

✔ Provider를 사용하면 상태를 하나의 상위 컴포넌트에서 전역 관리 가능함
→ 컴포넌트 간 응집도 높이고, 상태 흐름을 명확하게 관리

---

✅ Query란?

서버에서 데이터를 가져오는 행위 (ex. API 호출)

• React Query 같은 라이브러리를 사용하면:
  • useQuery() / useSuspenseQuery() 등으로 비동기 데이터 요청
  • 캐시 기능이 있어 같은 쿼리는 다시 호출하지 않음
  • 상태: isLoading, isFetching, error, data 등 자동 관리

---

✅ 쿼리와 Provider의 관계?

역할	설명
쿼리(Query)	실제 API 호출 담당 (GET, POST 등)
Provider	쿼리에서 가져온 데이터 + 기타 상태들을 전역에서 쓸 수 있게 공급

→ 쿼리로 데이터를 가져오고, 그걸 Context로 감싸서 여러 컴포넌트에서 재사용 가능하게 만듦

---

✅ 언제 Provider를 쓰면 좋은가?

상황	쓰면 좋음?
작은 컴포넌트끼리만 공유	❌ props로 충분
페이지 전체에서 공유 (ex. 필터 조건, 검색어, 리스트 데이터 등)	✅ Context Provider 추천
쿼리 응답값 + 필터 상태 + 페이징 같이 관리	✅ Provider로 묶으면 최적화와 응집도 상승

---

✍️ 작성 규칙 (ITP-CCC)

Context Provider를 작성할 땐 다음 규칙을 지켜주세요:

📦 1. **I**mport

• 필요한 훅, 타입, 쿼리 등 불러오기

✍️ 2. **T**ype 정의

• Context 내부에서 다룰 value 타입 정의 (e.g., SomeContextType)

⚙️ 3. **P**rovider 생성

• createContext로 context 객체 만들기 + 기본값 세팅

📬 4. **C**hild Props 정의

• children: React.ReactNode를 받는 props 타입

🧠 5. **C**omponent 구현

• 내부 상태 관리 (useState, useQuery, useEffect 등)
• value={{ ... }}에 정확하게 타입 맞춰서 전달

🚀 6. **C**ontext Hook 만들기

• useXXXProvider() 이름으로 context 리턴하는 훅 정의

📤 7. default export

• Provider 컴포넌트를 export

---

🧠 전체 기억하기: 📦 ITP-CCC 구조

단계	이름	설명
1️⃣	Import	필요한 모듈/타입 import
2️⃣	Type 정의	Context에서 사용할 타입 정의
3️⃣	Provider 객체 생성	createContext로 context 객체 만들기
4️⃣	Child Props	Provider Props 타입 정의
5️⃣	Component	내부 상태 + 쿼리 + value={} 설정
6️⃣	Context Hook	useXXXProvider()로 접근성 향상
7️⃣	Export	default export 꼭 추가

---

✅ 예시 전체 코드

import { createContext, useContext, useState, Dispatch, SetStateAction } from 'react';
import useXYZ from '@/hooks/useXYZ';
import { Item } from '@/types/model/item';

type XYZContextType = {
  itemList: Item[];
  count: number;
  setCount: Dispatch<SetStateAction<number>>;
};

const XYZContext = createContext<XYZContextType>({
  itemList: [],
  count: 0,
  setCount: () => {},
});

type XYZProviderProps = {
  children: React.ReactNode;
};

const XYZProvider = ({ children }: XYZProviderProps) => {
  const [count, setCount] = useState(0);
  const { data: itemList = [] } = useXYZ();

  return (
    <XYZContext.Provider value={{ itemList, count, setCount }}>
      {children}
    </XYZContext.Provider>
  );
};

export const useXYZProvider = () => useContext(XYZContext);
export default XYZProvider;

---

🔚 마무리 팁

• Context는 너무 많이 남발하면 오히려 복잡해질 수 있으니 공통으로 사용하는 큰 상태에만 적용
• 쿼리와 결합해서 사용하면 더욱 깔끔한 데이터 흐름 설계 가능
• value={{ ... }}에 들어가는 key들은 ContextType과 100% 일치하도록 유지하세요.

---

📌 이 구조대로 작성하면 규모가 커져도 유지보수/협업이 편리해집니다!