template.js

template 파일은 layout과 유사하게 레이아웃이나 페이지를 감싸는 역할을 합니다. 하지만 라우트 간에 지속되고 상태를 유지하는 레이아웃과 달리, 템플릿은 고유한 키를 부여받아 자식 클라이언트 컴포넌트가 네비게이션 시 상태를 리셋합니다.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

export default function Template({ children }) {
  return <div>{children}</div>;
}

흔하지는 않지만, 다음과 같은 경우에 레이아웃 대신 템플릿을 선택할 수 있습니다:

• useEffect (예: 페이지 조회수 로깅)와 useState (예: 페이지별 피드백 양식)에 의존하는 기능이 필요한 경우.
• 기본 프레임워크 동작을 변경하고 싶은 경우. 예를 들어, 레이아웃 내부의 Suspense 경계는 레이아웃이 처음 로드될 때만 폴백을 표시하고 페이지 전환 시에는 표시하지 않습니다. 템플릿의 경우 각 네비게이션마다 폴백이 표시됩니다.

Props

children (필수)

Template은 children prop을 받습니다. 예를 들어:

<Layout>
  {/* 템플릿에는 자동으로 고유한 키가 부여됩니다. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

알아두면 좋은 점:

• 기본적으로 template는 서버 컴포넌트이지만, "use client" 지시어를 통해 클라이언트 컴포넌트로도 사용할 수 있습니다.
• 사용자가 template를 공유하는 라우트 간을 이동할 때, 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 클라이언트 컴포넌트의 상태는 유지되지 않고, 효과가 다시 동기화됩니다.

버전 기록