1. 레이아웃(Layout)
- 상태와 상호작용이 유지됩니다
- 여러 페이지에서 공유되는 UI를 위해 사용됩니다
- 렌더링 시 레이아웃은 자식 컴포넌트 간에 상태를 보존합니다
- 주로 사용되는 경우
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<nav>공통 네비게이션</nav>
{children}
<footer>공통 푸터</footer>
</body>
</html>
)
}
2. 템플릿(Template)
- 각 자식 페이지나 레이아웃이 새로 마운트될 때마다 새 인스턴스가 생성됩니다
- 상태가 유지되지 않고 DOM 요소가 재생성됩니다
- 페이지 전환 시마다 다시 마운트되어야 하는 기능에 적합합니다
- 주로 사용되는 경우
// app/template.tsx
export default function Template({
children,
}: {
children: React.ReactNode
}) {
return (
<div>
{/* 애니메이션 효과나 로깅 등이 필요한 경우 */}
{children}
</div>
)
}
사용 사례 비교:
레이아웃 사용이 적합한 경우:
- 헤더, 푸터, 사이드바와 같은 지속적인 UI 요소
- 전역 상태나 컨텍스트를 공유해야 하는 경우
- 페이지 간 이동시에도 상태를 유지해야 하는 경우
템플릿 사용이 적합한 경우:
- 페이지 전환 애니메이션
- 페이지 접속시마다 초기화되어야 하는 카운터나 타이머
- useEffect 훅이 페이지마다 다시 실행되어야 하는 경우
- 페이지별 피드백이나 분석 기능
실제 사용 예시
// app/layout.tsx (레이아웃)
export default function Layout({ children }) {
const [user] = useState(getUser()) // 상태 유지됨
return (
<UserContext.Provider value={user}>
<nav>
<Logo />
<UserProfile />
</nav>
{children}
</UserContext.Provider>
)
}
// app/template.tsx (템플릿)
export default function Template({ children }) {
useEffect(() => {
// 페이지 방문마다 실행됨
logPageView()
}, [])
return (
<div className="page-transition">
{children}
</div>
)
}
핵심 차이점을 정리하면
1. 상태 유지: 레이아웃은 유지, 템플릿은 초기화
2. 마운팅: 레이아웃은 한 번, 템플릿은 매 페이지 전환마다
3. 용도: 레이아웃은 공통 UI, 템플릿은 페이지별 기능
4. 성능: 레이아웃이 더 효율적 (재렌더링이 적음)
728x90
'코딩공부 > Next.js' 카테고리의 다른 글
| [Next.sj & Node.js] Slack을 통한 메시지 발송 및 파일업로드 (0) | 2025.03.14 |
|---|---|
| [Next.js] URL: 쿼리파라미터와 동적라우팅 방식 (0) | 2025.03.05 |
| Next.js와 HeidiSQL을 사용한 파일첨부 방법 (1) | 2024.12.06 |
| Next.js의 오류처리 (4) | 2024.10.31 |