layout.tsx — 상태가 유지됩니다
페이지를 이동해도 이 카운터 값은 유지됩니다.
count: 0
template.tsx — 매번 새로 마운트됩니다
페이지를 이동하면 이 카운터가 0으로 리셋됩니다. (마운트 시각: …)
count: 0
template.tsx 데모
위의 파랑 영역(layout.tsx)과 초록 영역(template.tsx)의 카운터를 각각 증가시킨 후 Sub A 또는 Sub B로 이동해보세요.
routing-files/template-demo/
├── layout.tsx ← 상태 유지 (파랑 테두리)
├── template.tsx ← 매번 재생성 (초록 테두리)
├── page.tsx ← 현재 페이지
├── sub-a/
│ └── page.tsx ← 하위 페이지 A
└── sub-b/
└── page.tsx ← 하위 페이지 B핵심 코드
// template.tsx — 네비게이션마다 새 인스턴스 생성
'use client';
import { useState } from 'react';
const Template = (props: { children: React.ReactNode }) => {
// 이 state는 네비게이션마다 초기화됩니다
const [count, setCount] = useState(0);
return (
<div>
<p>Template count: {count}</p>
{props.children}
</div>
);
};설명
- template.tsx는 layout.tsx와 동일하게 children을 감싸지만, 네비게이션마다 새 인스턴스가 생성됩니다.
- layout은 상태를 유지하지만, template은 매번 state가 초기화됩니다.
- 페이지 진입 애니메이션, 페이지별 피드백 UI 등에 활용합니다.
- useEffect도 매번 다시 실행되므로 페이지 뷰 로깅에도 유용합니다.
실험: layout(파랑)과 template(초록) 카운터를 둘 다 증가시킨 후 위 네비게이션에서 Sub A → Sub B → 홈으로 이동해보세요. layout 카운터는 유지되고, template 카운터는 매번 0으로 돌아갑니다.