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 Boundaries는 처음 로드될 때만 폴백을 표시하고 페이지 전환 시에는 표시하지 않습니다. 템플릿의 경우, 탐색할 때마다 폴백이 표시됩니다.

Props

children (required)

템플릿은 children prop을 받습니다. 예를 들어:

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

알아두면 좋은 점:

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

Version History