Next.js 14 시작하기 #12 Templates

template

• 템플릿은 기본적으로 레이아웃과 구조적으로 비슷한 역할을 하지만, 상태관리와 라이프사이클 측면에서 다른 점이 있음
• 레이아웃처럼 템플릿도 각 자식 레이아웃이나 페이지를 감싸는 역할을 하지만, 사용자가 템플릿을 공유하는 라우트들 사이를 이동할 때, 새로운 컴포넌트 인스턴스가 마운트되고 DOM 요소가 재생성되며, 상태는 보존되지 않고, 효과(effect)가 다시 동기화 됨
• 즉, 템플릿은 페이지 간 이동할 때마다 상태를 초기화하며, 각 페이지 또는 라우트가 마운트될 때마다 새로 시작함, 이러한 특성은 특정 페이지 또는 라우트들이 각각 독립적인 상태와 생명주기를 가져야 할 때 유용함
• 템플릿은 template.js 또는 templage.tsx 파일에서 기본 react 컴포넌트를 내보내는 것으로 정의될 수 있으며, 레이아웃과 마찬가지로 children prop을 통해 중첩된 라우트 세그먼트를 렌더링해야 함(layout.js와 구조적으론 동일)

// app/(auth)/layout.js

'use client';

import Link from "next/link";
import { usePathname } from "next/navigation";
import './styles.css'
import { useState } from "react";

const navLinks = [
  { name: 'Register', href: '/register' },
  { name: 'Login', href: '/login' },
  { name: 'Forgot Password', href: '/forgot-password' },
];

export default function AuthLayout({ children }) {
  const pathname = usePathname();
  const [input, setInput] = useState('')

  return (
    <div>
      <div>
        <input value={input} onChange={(e) => setInput(e.target.value)}></input>
      </div>
      <div className="button-container">
        {navLinks.map((link) => {
          const isActive = pathname.startsWith(link.href);

          return (
            <Link
              href={link.href}
              key={link.name}
              className={isActive ? "red" : "blue"}
            >
              {link.name}
            </Link>
          )
        })}
        {children}
      </div>
    </div>
  )
}

(auth)에 해당하는 페이지에 들어가면

위와 같이 input값을 입력 가능한 텍스트 박스를 만들었다.
해당 input 텍스트 박스는 layout이므로 register, login, forgot password 페이지를 이동하더라도 동일한 레이아웃을 공유하는 페이지이므로 input값은 그대로 유지된다.
하지만 해당 layout.js 파일의 이름을 template.js로 바꾸게 되면 레이아웃이 아닌 템플릿이 되어 다른 페이지로 이동할 때 마다 템플릿의 특성에 의해 상태를 초기화시켜 input값이 초기화된다.

템플릿과 레이아웃을 함께 사용할 수 있는데

이와 같은 구조를 가지게 된다.

예를 들어
이런 식으로 layout.js와 template.js 파일을 같은 경로에 두게 되면

이와 같이 레이아웃 안에 템플릿이 들어가는 구조가 된다.