[Next.js 기초] 09. Provider 주입 패턴

// src/app/providers.jsx
"use client";

import ThemeProvider from "@/context/ThemeProvider";

export default function Providers({ children }) {
  return (
    <ThemeProvider>
      {children}
    </ThemeProvider>
  )
}

• 클라이언트 컴포넌트로 Provider를 만들어 전체 앱에 컨텍스트를 제공함('use client' 지시어 사용)
• 최상위 레이아웃(RootLayout)에서 이 Provider를 import하여 children을 감싸는 방식으로 모든 페이지와 컴포넌트에 컨텍스트를 제공함
• 서버 컴포넌트(RootLayout)에서 클라이언트 컴포넌트(Providers)로 children을 전달하는 서버-클라이언트 컴포넌트 컴포지션 패턴을 활용함