처음 만난 Next.js 문서
4.3
Templates
먼저 Template이라는 영어 단어는 '틀'이라는 뜻을 갖고 있습니다. 그리고 Next.js의 Template 또한 단어의 의미처럼 페이지의 틀을 잡아주는 역할을 합니다. 역할만 보면 Layout과 굉장히 비슷하게 느껴지죠. Template은 하위 컴포넌트들을 감싼다는 점에서는 Layout과 유사합니다. 하지만 경로가 변경되어도 상태(state)가 유지되는 Layout과 달리, Template은 경로가 변경될 때마다 각 경로에 대해 새로운 인스턴스를 생성합니다. 즉, Template을 한 마디로 표현하면 상태가 유지되지 않는 레이아웃이라고 할 수 있습니다.
예를 들어, 다른 경로에 존재하지만 동일한 템플릿이 적용되는 페이지가 존재한다고 했을 때, 경로가 변경되면 하위 컴포넌트가 새로 마운트되고 DOM element들이 새로 생성되며, 클라이언트 컴포넌트의 state가 유지되지 않으며, effect들이 다시 동기화 됩니다.
이러한 Template을 사용하는 경우로는 경로가 변경되었을 때 useEffect() 훅을 다시 실행하거나, 클라이언트 컴포넌트를 다시 마운트하고 싶은 경우 등이 있습니다. Template을 정의하는 방법은 아래 그림과 같이 각 경로 폴더 내에 template.js라는 이름의 파일을 만들면 됩니다.
아래 코드는 아주 간단한 형태의 Template 예시 코드입니다. Template 역시 레이아웃과 동일하게 children prop을 사용하여 하위 컴포넌트를 렌더링 합니다.
// app/template.tsx
interface TemplateProps {
children: React.ReactNode;
};
function Template(props: TemplateProps) {
const { children } = props;
return <div>{children}</div>
}
export default Template;
만약 동일한 경로 폴더 내에 Layout과 Template이 모두 존재할 경우에는 아래와 같은 형태로 중첩이 됩니다. 먼저 Layout이 가장 바깥에서 감싸고 있고, 그 내부에 Template이 하위 children을 감싸는 형태가 되는 것이죠.
<Layout>
{/* NOTE: 템플릿에는 고유한 키 값이 필요함 */}
<Template key={routeParam}>{children}</Template>
</Layout>
조금 더 이해를 돕기 위해 3장에서 살펴본 App Router의 컴포넌트 계층구조를 다시 한 번 보겠습니다. 이 그림을 보면 Layout이 최상위에 위치하고, 그 다음으로 Template이 위치하는 것을 볼 수 있습니다. 이러한 App Router의 각 파일과 컴포넌트 계층구조를 잘 기억해두기 바랍니다.
마지막 업데이트: 2025년 10월 24일 02시 08분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page