#17. Templates (vs layout)

Next.js(App Router)에서 layout.tsx와 template.tsx는 “둘 다 라우트 세그먼트의 공통 UI 래퍼”처럼 보이지만, 가장 큰 차이는 “라우트 이동 시 유지(persist)되느냐 / 매번 새로 만들어지느냐” 입니다.

1) layout.tsx (지속되는 껍데기)

• 해당 세그먼트 하위 페이지로 클라이언트 라우팅 이동(Link로 이동 등)해도 layout은 유지됩니다.
• 즉, layout 안의 React 컴포넌트 상태(state), 클라이언트 컴포넌트 인스턴스, DOM 등이 가능한 한 유지되는 방향.
• 대표 용도:
  • 헤더/사이드바/푸터 같은 앱 쉘(App Shell)
  • 전역 Provider(Theme/Auth/QueryClient 등)
  • 세그먼트 공통 네비게이션/탭 바
  • “페이지 바뀌어도 유지돼야 하는” UI

2) template.tsx (매번 새로 생성되는 껍데기)

• 같은 세그먼트 하위에서 라우트 이동을 해도 template은 매번 새로 마운트됩니다.
• 즉 template 아래에 있는 트리(대부분 children)는 이동할 때마다 초기화되는 느낌.
• 대표 용도:
  • 페이지 이동할 때마다 state를 리셋하고 싶을 때
  • 라우트 전환 시 진입 애니메이션을 항상 다시 실행하고 싶을 때
  • 같은 레이아웃 구조를 쓰지만, **“페이지 이동마다 새 화면”**처럼 동작시키고 싶을 때

한 줄로 요약하면
layout = 유지되는 프레임, template = 라우트 이동마다 새로 깔리는 프레임

---

3) template을 쓰는 “이유” (언제 써야 이득인가)

A. 화면 전환마다 상태를 초기화하고 싶을 때

예: 목록/필터 UI를 layout에 두면 페이지 이동해도 필터 상태가 남아서 UX가 꼬일 수 있음 → template로 감싸서 이동마다 초기화.

B. 전환 애니메이션을 항상 다시 돌리고 싶을 때

예: 각 페이지 진입 시 fade-in 같은 효과를 “항상” 재생하고 싶음.
layout은 유지되면 애니메이션이 1번만 실행될 수 있는데, template은 매번 마운트되니 매번 실행 가능.

C. 라우트 이동 시 스크롤/포커스/일시적 UI를 리셋하고 싶을 때

예: 모달 열림 상태, 특정 섹션 스크롤 위치, 토스트 중복 방지 등.

---

4) 실무 감각으로 추천 패턴

• 대부분은 layout.tsx만으로 충분합니다. (공통 프레임 유지가 성능/UX에 이점)
• template.tsx는 “특정 구간에서만” 쓰는 특수 도구로 두는 게 좋아요.
  • 예: /auth/* 구간은 페이지마다 폼 상태 리셋이 필요 → app/(auth)/template.tsx 사용
  • 예: /dashboard는 사이드바 유지가 중요 → app/(dashboard)/layout.tsx 사용

---

5) 예시 (개념만)

• app/(dashboard)/layout.tsx : 사이드바/헤더 고정
• app/(auth)/template.tsx : 로그인→회원가입 이동 시 폼 상태/애니메이션 항상 초기화