Skip to main content

template.js

템플릿(template.js) 파일은 앱 라우터에서 제공하는 특수 목적을 가진 파일입니다. 레이아웃 파일과 유사하게 특정 URL에 해당하는 페이지 UI 골격을 잡는 역할을 합니다. 다만, 레이아웃 파일은 페이지 이동시에도 레이아웃 컴포넌트가 다시 그려지지 않거나 레이아웃 파일 내의 상태를 보존해주는 반면에 템플릿 파일은 페이지 이동시 마다 매번 새로운 컴포넌트를 다시 그리고 새로운 컴포넌트 인스턴스를 생성해 줍니다.

Template 문법​

템플릿 컴포넌트의 기본 문법입니다.

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

템플릿 컴포넌트는 항상 children 이라는 프롭을 받아야 합니다. 이 프롭은 레이아웃 컴포넌트의 children 프롭을 그대로 사용합니다.

<Layout>
  {/* Note that the template is given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Template 활용 방법​

레이아웃 컴포넌트와 다르게 템플릿 컴포넌트는 페이지를 이동할 때 마다 템플릿을 포함한 하위 컴포넌트들의 상태나 이펙트가 초기화 됩니다. 따라서, 페이지를 이동할 때마다 의도적으로 상태를 초기화 하거나 이펙트를 다시 시켜야 하는 곳에 활용합니다.