RARRIT

기억을 너무 믿지 말자

:ledger: Next.js에서 template 파일의 특징과 사용법

Next.js에서 template.tsx 파일은 특정 경로에서 동적으로 렌더링해야 하는 페이지에 사용되며, 일반적인 layout.tsx와는 달리, 페이지가 처음 생성될 때마다 새로운 인스턴스를 생성하는 방식으로 작동한다. 특징과 사용법에 대해 알아보자!

:one: template 파일이란?

Next.js의 template.tsx 파일은 주로 동적 경로 또는 여러 경로에서 중복되는 페이지 구성을 위해 사용되며, 각 경로가 처음으로 요청될 때마다 새로운 컴포넌트 인스턴스를 생성하며, 동일한 레이아웃이라도 매번 새로운 상태와 구성으로 렌더링된다. (re-rendering 중요중요) 아래와 같은 상황에서 유용하게 사용됨

  • 동적 페이지에 대한 특별한 요구사항이 있는 경우 (페이지 전환 시 애니메이션)
  • 사용자별 동작이나 초기화된 상태를 제공해야 하는 경우 (화이트, 블랙 모드)

:two: 언제 사용할까?

  • 페이지 별로 상태나 데이터를 별도로 관리해야 할 때
  • 사용자나 세션별로 서로 다른 상태를 유지해야 할 때
  • 경로에 따라 매번 새롭게 렌더링되는 UI를 구성해야 할 때
  • 페이지 로드 시 각각의 초기 설정이 필요할 때

:three: layout.tsx와의 차이점

두 파일은 비슷하면서 다른 부분이 있는데 그 부분은 상태를 유지하는가? 리-렌더링이 일어나는가?다. 아래의 내용을 보며 자세히 알아보자

  1. layout.tsx
    • 각 경로에서 공유되는 상태를 가지고, 해당 경로의 여러 페이지 간에 같은 레이아웃을 재사용한다. 즉, 페이지가 변경되어도 상태가 유지됨
  2. template.tsx
    • 각 경로가 요청될 때마다 새로운 인스턴스가 생성되어 초기화된 상태를 렌더링한다. 따라서 경로 간 이동 시 상태가 공유되지 않고, 매번 초기 상태로 시작함

:four: Template 사용 시 주의할 점

  1. 상태 관리
    • template.tsx는 페이지마다 새로운 상태를 가지므로, 페이지 전환 간에 상태를 유지해야 한다면 layout.tsx를 사용하는 것이 더 적합하다.
  2. 렌더링 비용
    • 각 경로마다 새로운 인스턴스를 생성하기 때문에, 상태를 초기화하는 데 드는 비용이 있을 수 있다. 만약 상태를 유지하는 것이 더 중요하다면 template 대신 layout을 고려하는 것이 좋다.
  3. 중복 레이아웃 방지
    • layout.tsx와 함께 사용하여, 중복되는 부분은 layout.tsx로 분리하고, 동적으로 변해야 하는 부분만 template.tsx에서 처리하면 좋다.

:fire: 마무리

Next.js의 template.tsx 파일은 각 경로마다 새로운 상태와 UI를 렌더링할 때 정말 유용하게 사용된다. 동적 페이지 및 상태 초기화가 필요한 경우 효과적으로 사용하며 layout.tsx파일과 차이점을 이해하고 사용하면 잘 사용할 수 있을 것 같다.

참고