[240704 TIL] (공식문서번역)Template.tsx

오늘부터 next.js 공식문서를 하나씩 파헤쳐보려고 합니다.
시작으로, 제가 잘 몰랐던 Template.tsx 부터 해보겠습니다.

template.js

템플릿 파일은 각 하위 레이아웃 또는 페이지를 래핑한다는 점에서 레이아웃과 유사합니다.
경로 전체에서 지속적으로 상태를 유지하는 레이아웃과 달리 템플릿은 탐색 시(on Navigation) 각 하위 레이아웃에 대해 새 인스턴스를 만듭니다.

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

 

 

 

흔하지는 않지만 원하는 경우 레이아웃 대신 템플릿을 선택할 수 있습니다.

• 사용 효과(예: 페이지 조회 수 기록) 및 사용 상태(예: 페이지별 피드백 양식)에 의존하는 기능입니다.
• 기본 프레임워크 동작을 변경하려면 다음과 같이 하세요. 예를 들어 레이아웃 내부의 서스펜스 경계(Suspense Boundaries)는 레이아웃을 처음 로드할 때만 fallback을 표시하고 페이지를 전환할 때는 표시하지 않습니다.
• 하지만 template.tsx의 경우 모든 탐색(each Navigation)에 fallback이 표시됩니다.

Props

props는 필수 이며 layout 과 같이 children 을 받습니다.

알아두면 좋은 정보:

기본적으로 template.tsx는 서버 컴포넌트이지만 "use client"를 통해 클라이언트 컴포넌트로도 사용할 수 있습니다.

사용자가 template.tsx를 공유하는 경로를 탐색하면 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소는 다시 생성되며, state 가 보존되지 않고, effect 는 다시 실행됩니다.

결론

매번 리렌더링이 되고 싶으면 template.tsx
아니면 layout.tsx