Provider 설정

Grunfeld를 사용하기 위해서는 먼저 애플리케이션의 최상위에 GrunfeldProvider를 설정해야 합니다. 이 Provider는 대화상자의 렌더링과 상태 관리를 담당합니다.

Next.js App Router#

Next.js App Router를 사용하는 경우, 레이아웃 파일에 Provider를 추가합니다:

import { GrunfeldProvider } from "@ilokesto/grunfeld";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <GrunfeldProvider>
          {children}
        </GrunfeldProvider>
      </body>
    </html>
  );
}

Next.js Pages Router#

Pages Router를 사용하는 경우, _app.tsx 파일에 Provider를 추가합니다:

import { GrunfeldProvider } from "@ilokesto/grunfeld";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <GrunfeldProvider>
      <Component {...pageProps} />
    </GrunfeldProvider>
  );
}

React (Vite, CRA)#

일반 React 애플리케이션에서는 앱의 루트 컴포넌트에 Provider를 추가합니다:

import { GrunfeldProvider } from "@ilokesto/grunfeld";

function App() {
  return (
    <GrunfeldProvider>
      <YourApp />
    </GrunfeldProvider>
  );
}

export default App;