Template

템플릿 컴포넌트 사용

template.tsx는 layout과 비슷하지만 navigation 때 새 인스턴스를 만든다. 유지가 장점인 layout과 반대로 재초기화가 필요한 상황에서만 써야 한다.

01

재초기화 이유 확인

페이지 이동마다 form, animation, analytics marker를 새로 시작해야 하는지 먼저 묻는다.

02

상태 손실 계산

template 안 client state는 이동마다 사라질 수 있으므로 보존되어야 하는 값은 밖으로 빼야 한다.

03

layout으로 충분한지 비교한다

단순 wrapper나 공통 frame이면 template보다 layout이 더 자연스럽다.

Remount
새 인스턴스 자식 segment 이동 때 컴포넌트를 다시 만든다.
초기 effect가 다시 실행된다.
Animation
전환 연출 페이지별 진입 애니메이션처럼 재생이 필요한 UI에 맞는다.
과하면 UX가 산만하다.
State reset
상태 초기화 검색 입력이나 local UI state가 이동마다 초기화된다.
의도한 손실인지 확인한다.
Layout default
유지 우선 대부분의 공통 UI는 layout으로 시작하는 편이 안전하다.
template은 이유가 있을 때만.

상태 · 이유 · 비용 점검

상태 사용자가 이동 뒤에도 기대하는 입력이나 선택이 사라지지 않는가.
이유 재마운트가 필요한 구체적인 이유가 코드 주석이나 설계에 남아 있는가.
비용 매 이동마다 비싼 초기화가 반복되지 않는가.

템플릿 컴포넌트 사용 선택 기준

// keep frame/state -> layout.tsx
// reset on navigation -> template.tsx