코드 출처 : https://github.com/Cluster-Taek/next14-boilerplate
GitHub - Cluster-Taek/next14-boilerplate
Contribute to Cluster-Taek/next14-boilerplate development by creating an account on GitHub.
github.com
layout.ts
import './globals.css';
import Modal from '@/components/common/modal';
import CoreProvider from '@/contexts/core-provider';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${pretendard.className} font-sans`}>
<CoreProvider>
{children}
<Modal />
</CoreProvider>
</body>
</html>
);
}
export const metadata: Metadata = {
title: 'Next App',
description: 'Generated by create next app',
};
메타 데이터 정의
- Next.js에서 사용되는 메타데이터로, 페이지 제목(title)과 설명(description)을 정의합니다.
앱 레이아웃 구성하기
Next.js에서 레이아웃은 애플리케이션의 일관된 구조를 유지하는 데 중요한 역할을 합니다.
RootLayout 컴포넌트는 전체 앱을 감싸는 레이아웃을 정의합니다.
이 레이아웃 컴포넌트는 글로벌 스타일, 폰트, 그리고 모달과 같은 컴포넌트를 포함합니다.
RootLayout 컴포넌트
- <html lang="en">:
- HTML 문서의 언어 속성을 영어(en)로 설정합니다.
- <body>:
- className에 pretendard.className과 font-sans를 추가하여 커스텀 폰트와 산세리프 폰트를 적용합니다.
- <CoreProvider>:
- 앱의 전역 컨텍스트를 제공하는 컴포넌트로, 하위 컴포넌트들이 컨텍스트를 공유할 수 있습니다.
- {children}:
- 이 프로퍼티는 해당 레이아웃에 포함될 자식 컴포넌트를 나타냅니다.
- 즉, 각 페이지가 이 레이아웃을 통해 렌더링됩니다.
- <Modal />:
- 공통 모달 컴포넌트로, 앱 내에서 필요에 따라 표시될 수 있습니다.
이처럼 RootLayout 컴포넌트는 앱의 기본적인 틀을 제공하며, 각 페이지는 children을 통해 해당 틀 안에 삽입됩니다.
<CoreProvider>의 구조
import AuthProvider from './auth-provider';
import ModalProvider from './modal-provider';
import { QueryProvider } from './query-provider';
import SessionProvider from '@/contexts/session-provider';
interface ICoreProviderProps {
children?: React.ReactNode;
}
const CoreProvider = ({ children }: ICoreProviderProps) => {
return (
<SessionProvider>
<AuthProvider>
<QueryProvider>
<ModalProvider>{children}</ModalProvider>
</QueryProvider>
</AuthProvider>
</SessionProvider>
);
};
export default CoreProvider;
Provider 간의 의존성과 초기화 순서 고려
- 각 Provider는 특정한 기능이나 상태를 제공하며, 일부는 다른 Provider에 의존할 수 있습니다.
- AuthProvider는 SessionProvider에 의존합니다.
- SessionProvider가 사용자 세션을 관리하고 제공하지 않으면, AuthProvider가 정상적으로 동작하지 않을 가능성이 큽니다.
- QueryProvider나 ModalProvider는 인증된 사용자와 관련된 데이터를 처리하거나 모달 상태를 관리할 수 있는데, 이는 인증 상태를 먼저 알아야 할 수도 있습니다.
- AuthProvider는 SessionProvider에 의존합니다.
→ 따라서, SessionProvider를 최상위에 배치하고, 그 아래에 AuthProvider, QueryProvider, ModalProvider를 계층적으로 배치한 것입니다.
각 Provider에 대해 다음 블로그에 작성 예정입니다.
'개발 공부 > React' 카테고리의 다른 글
| Next.js에서 레이아웃 구성 (2) / QueryProvider (0) | 2024.12.26 |
|---|---|
| Next.js에서 레이아웃 구성 (1) / SessionProvider, AuthProvider (1) | 2024.12.25 |
| Next.js의 app 디렉토리 구조와 파일 역할 (1) | 2024.12.21 |
| React createContext / useContext (0) | 2024.12.18 |
| Next.js / React (1) | 2024.12.16 |