React Provider란 무엇인가?

1. Provider란?

• Provider는 React의 Context API에서 "공급자(Provider)" 역할을 하는 컴포넌트입니다.
• 하위 컴포넌트 트리에 값을 공급(Provide)하는 역할을 합니다.
• 코드 예시:
• <MyContext.Provider value={어떤값}> <자식컴포넌트들 ... /> </MyContext.Provider>
• 이렇게 Provider로 감싼 자식 컴포넌트들은 useContext(MyContext)를 통해 바로 값을 사용할 수 있습니다.

---

2. 왜 써야 할까?

(1) props drilling 방지

• 원래 React는 부모 → 자식으로 props를 넘겨야만 데이터가 전달됩니다.
• 컴포넌트 트리가 깊어지면, 매번 중간중간 props로 넘기는 것이 번거롭고, 코드가 복잡해집니다.
• Context + Provider를 사용하면, 중간 단계를 거치지 않고 원하는 하위 컴포넌트 어디에서나 값을 꺼내 쓸 수 있습니다.

(2) 전역/공통 데이터 제공

• 로그인 정보, 테마, 언어, 글로벌 설정 등 여러 곳에서 동시에 사용해야 하는 데이터를 전역적으로 관리할 때 유용합니다.
• 예: 로그인 여부, 다크모드 상태, 사용자 정보 등

(3) 상태관리 라이브러리와 결합

• Redux, Zustand, React Query, styled-components 등의 라이브러리들도 Provider 패턴을 활용합니다.
• 앱 전체 또는 특정 영역에만 상태/스토어/설정을 공급할 수 있습니다.

---

3. 사용 예시

(1) 기본 Context Provider 사용

// context.js
import { createContext, useContext } from "react"
export const ThemeContext = createContext("light") // 기본값: light

// App.jsx
<ThemeContext.Provider value="dark">
  <MyComponent />
</ThemeContext.Provider>

// MyComponent.jsx
const theme = useContext(ThemeContext) // "dark" 반환!

(2) Zustand + Context Provider (페이지 단위 상태 관리)

// store.js
import { createContext, useRef } from "react"
export const StoreContext = createContext(null)

export function StoreProvider({ children }) {
  const store = useRef(createStore()).current
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  )
}

// 사용 예시
<StoreProvider>
  <SomeComponent />
</StoreProvider>

// SomeComponent.jsx
const store = useContext(StoreContext) // zustand store에 접근 가능

---

4. Provider가 없으면?

• Provider로 감싸지 않은 상태에서 useContext나 커스텀 훅을 사용하면,
  • 기본값(undefined)만 반환되거나,
  • 아예 에러가 발생할 수 있습니다.

실무에서는 "Provider로 감싸주지 않으면 해당 상태/스토어/설정에 접근할 수 없다"는 점을 반드시 기억해야 합니다!

---

5. 정리 (한 줄 요약)

Provider는 Context(또는 상태/스토어)를 하위 컴포넌트 트리에 공급하는 React 컴포넌트이다.
Provider로 감싸줘야 자식 컴포넌트에서 안전하게 useContext나 관련 훅으로 데이터를 사용할 수 있다.