코딩공부/Next.js

Next.js의 Layout과 Template

표자 2024. 10. 31. 10:09

1. 레이아웃(Layout)
- 상태와 상호작용이 유지됩니다
- 여러 페이지에서 공유되는 UI를 위해 사용됩니다
- 렌더링 시 레이아웃은 자식 컴포넌트 간에 상태를 보존합니다
- 주로 사용되는 경우

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <nav>공통 네비게이션</nav>
        {children}
        <footer>공통 푸터</footer>
      </body>
    </html>
  )
}



2. 템플릿(Template)
- 각 자식 페이지나 레이아웃이 새로 마운트될 때마다 새 인스턴스가 생성됩니다
- 상태가 유지되지 않고 DOM 요소가 재생성됩니다
- 페이지 전환 시마다 다시 마운트되어야 하는 기능에 적합합니다
- 주로 사용되는 경우

// app/template.tsx
export default function Template({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div>
      {/* 애니메이션 효과나 로깅 등이 필요한 경우 */}
      {children}
    </div>
  )
}


사용 사례 비교:

레이아웃 사용이 적합한 경우:
- 헤더, 푸터, 사이드바와 같은 지속적인 UI 요소
- 전역 상태나 컨텍스트를 공유해야 하는 경우
- 페이지 간 이동시에도 상태를 유지해야 하는 경우

템플릿 사용이 적합한 경우:
- 페이지 전환 애니메이션
- 페이지 접속시마다 초기화되어야 하는 카운터나 타이머
- useEffect 훅이 페이지마다 다시 실행되어야 하는 경우
- 페이지별 피드백이나 분석 기능

실제 사용 예시

// app/layout.tsx (레이아웃)
export default function Layout({ children }) {
  const [user] = useState(getUser()) // 상태 유지됨
  
  return (
    <UserContext.Provider value={user}>
      <nav>
        <Logo />
        <UserProfile />
      </nav>
      {children}
    </UserContext.Provider>
  )
}

// app/template.tsx (템플릿)
export default function Template({ children }) {
  useEffect(() => {
    // 페이지 방문마다 실행됨
    logPageView()
  }, [])

  return (
    <div className="page-transition">
      {children}
    </div>
  )
}



핵심 차이점을 정리하면
1. 상태 유지: 레이아웃은 유지, 템플릿은 초기화
2. 마운팅: 레이아웃은 한 번, 템플릿은 매 페이지 전환마다
3. 용도: 레이아웃은 공통 UI, 템플릿은 페이지별 기능
4. 성능: 레이아웃이 더 효율적 (재렌더링이 적음)

728x90
저작자표시 (새창열림)