Next.js App Router에서 layout.tsx와 template.tsx는 둘 다 페이지를 감싸는 역할을 하지만, 상태 유지(State Persistence) 여부에서 결정적인 차이가 있다. 페이지 이동 시 상태가 유지되는 레이아웃과 달리, 매번 컴포넌트를 새로 마운트하여 상태를 초기화하는 템플릿의 동작 원리와 실무 사용 사례(애니메이션, 로깅)를 완벽하게 정리한다. Next.js Layout과 Template 차이: 페이지 이동 시 상태가 초기화되는 이유Next.js 13 이상(App Router)으로 마이그레이션을 하다 보면 layout.tsx 외에 template.tsx라는 낯선 파일을 마주하게 된다. 둘 다 하위 페이지(page.tsx)를 감싸는 래퍼(Wrapper) 역할을 한다는 점에..
