[05] next.js의 레이아웃과 템플릿에 대해서 설명해주세요

[hyeyoonS]

📎 질문

next.js의 레이아웃과 템플릿에 대해서 설명해주세요

(page라우터와 app라우터와의 비교를 중심으로)

✏ 구술 답변 키워드

• Page Router에서는 app 파일과 getLayout 프로퍼티를 통해 레이아웃을 구현할 수 있고, App Router에서는 layout 파일 컨벤션을 활용하여 구현할 수 있음
• App Router에서는 template 파일 컨벤션도 제공함. 페이지 파일을 래핑한다는 점에서 layout과 비슷하지만 layout은 페이지 이동 시 리렌더링 되지 않고 pathname, searchParams에 접근할 수 없는 반편 template는 페이지 이동 시 새로 마운트 되며, 클라이언트 컴포넌트로 설정할 수 있고 pathname, searchParams에 접근할 수 있다는 점이 다름.
• 그러한 차이에서 layout은 주로 공통 UI를 구현하기 위해 사용되고, template는 페이지 전환 시의 애니메이션 구현 등에 사용됨.

✏ 서술 답변

레이아웃

• 공통 UI를 의미한다.

Page Router

• 앱 전체 레이아웃은 app 파일에 정의한다.
• 여러 개의 레이아웃은 getLayout 프로퍼티를 사용해 정의한다.
• 레이아웃 중첩이 가능하다.
• 페이지가 아니므로 getStaticProps 또는 getServerSideProps를 사용할 수 없다.

App Router

• layout.tsx 라는 파일 컨벤션을 제공한다.
• 레이아웃 중첩이 가능하다.
• 레이아웃 간의 데이터 전달은 불가능하다.
• children(React.ReactNode 타입)을 매개변수로 받으며, 내부 디렉토리들을 알아서 children 변수로 받는다.
• 페이지 이동 시 리렌더링 되지 않는다.
• searchParams에 접근할 수 없다.
• pathname에 접근할 수 없다.
• 기본적으로 서버 컴포넌트이나 클라이언트 컴포넌트로 설정할 수 있다.
• 과거에는 Root Layout은 서버 컴포넌트여야만 했으나 해당 내용은 삭제 되었다. (프로젝트 경험상 Root Layout에서 클라이언트 컴포넌트를 사용할 수 없었다)
• 과거에는 특별한 사유가 없는 한 template.tsx가 아닌 layout.tsx을 사용하도록 권장하였으나 해당 내용은 삭제 되었다.

템플릿

• 페이지 컴포넌트를 래핑한다는 점에서 레이아웃과 비슷하다.
• App Router에서 제공하는 template.tsx 파일 컨벤션이다.
• 페이지 이동 시 새로 마운트 되며, DOM 요소 또한 새로 생성되고 상태도 보존되지 않는다.
• 기본적으로 서버 컴포넌트이나 클라이언트 컴포넌트로 설정할 수 있다.
• 페이지 전환 시 페이드 인/아웃이나 슬라이드와 같은 시각적 효과, Suspense의 fallback를 활용하여 페이지 전환 시마다 대체 콘텐츠 노출, 그 외 useEffect 및 useState에 의존적인 기능을 구현할 때 주로 사용한다.
• layout과 template는 동시에 둘 다 사용할 수 있다. 이 경우 기본적으로 layout 하위에 template가 위치한다.

[Nahyun-Kang]

next.js 앱 라우터에 페이지, 공유 레이아웃, 템플릿을 쉽게 생성할 수 있는 새로운 파일 컨벤션이 도입되었다.

레이아웃

여러 페이지에서 공유하는 UI로, 라우팅이 일어나고 탐색하는 시점에도 레이아웃은 상태를 보존하고 리렌더링이 일어나지 않는다. 레이아웃끼리 중첩이 가능하여 상위 레이아웃 아래 하위 레이아웃을 둘 수 있다.

app 라우터에서 app 디렉토리는 루트 레이아웃을 필수로 가지고 있어야 한다. 애플리케이션의 모든 페이지에 적용된다. html 태그와 body태그를 포함해야 한다.

앱 라우터와 페이지 라우터의 레이아웃 비교

• app router: 레이아웃을 중첩할 수 있다. 데이터 fetching도 담당할 수 있다.
• pages router: __app.js 파일이 전체 애플리케이션을 래핑하는 역할을 한다.
  • 여러 레이아웃을 중첩할 수 없다.
  • 데이터 fetch를 할 수 없다.

템플릿

템플릿은 페이지 컴포넌트를 래핑한다는 점에서 레이아웃과 비슷하지만, 템플릿의 경우에 탐색할 때마다 새로 마운트 되고, DOM 요소 역시 매번 새로 만들어지고 상태도 보존되지 않는다.

[olseul]

레이아웃

레이아웃은 여러 페이지에서 공유하는 UI입니다. 탐색하는 시점에도 레이아웃은 상태를 유지하고 리랜더링이 일어나지 않습니다. 레이아웃 또한 중첩이 가능합니다. 레이아웃은 layout.tsx로 정의가 가능합니다. children을 props로 받을 수 있고 렌더링하는 동안 하위 레이아웃이나 하위 페이지로 채워집니다.

템플릿

템플릿은 웹개발에서 중요한 역할을 수행하는데, 이는 각 페이지 또는 자식 컴포넌트를 감싸며 일관된 구조를 제공하면서도, 각 탐색마다 새로운 인스턴스를 생성하여 컴포넌트의 상태를 초기화시키는 특징을 가지고 있습니다. 이로 인해 여러 유용한 기능이 구현 가능해집니다.

1. 입/출입 애니메이션: CSS 또는 애니메이션 라이브러리를 이용해 템플릿에 다양한 페이지 전환 효과를 적용할 수 있습니다. 페이드 인/아웃이나 슬라이드와 같은 시각적 효과는 사용자 경험을 향상시키는데 기여합니다.

2. 기본 프레임워크 동작의 변경: 템플릿을 사용하면 기본적으로 정의된 프레임워크의 동작을 변경할 수 있습니다. 예를 들어, React의 Suspense 경계에서는 템플릿을 활용하여 페이지 전환 시마다 대체 콘텐츠를 보여주도록 설정할 수 있습니다. 이는 로딩 상태를 보다 세밀하게 관리할 수 있게 해줍니다.

[HaydenDevK]

• 먼저, layout.tsx, template.tsx 파일 컨벤션은 App router에만 존재한다.

  Page router

• 앱 전체 공통 레이아웃은 _app.js 내부에 정의한다.
• 페이지 별 레이아웃은 getLayout 프로퍼티를 통해 정의한다.

  App router

• layout과 template는 동시에 둘 다 사용할 수 있다. 이 경우 기본적으로 layout 하위에 template가 위치한다.

  layout.tsx

• 페이지 이동 시 리렌더링 되지 않는다.
• searchParams에 접근할 수 없다.
• pathname에 접근할 수 없다.
• 기본적으로 서버 컴포넌트이나 클라이언트 컴포넌트로 설정할 수 있다.
• 공통 UI를 정의할 때 주로 사용한다.
• 과거에는 RootLayout은 서버 컴포넌트여야만 했으나 해당 내용은 삭제 되었다.
• 과거에는 특별한 사유가 없는 한 layout.tsx을 사용하도록 권장하였으나 해당 내용을 삭제 되었다.

  template.tsx

• 페이지 이동 시 새로 마운트된다.
• 기본적으로 서버 컴포넌트이나 클라이언트 컴포넌트로 설정할 수 있다.
• 페이지 이동 시에 애니메이션, Suspense의 fallback 트리거, 기타 useEffect 및 useState에 의존적인 기능을 구현할 때 주로 사용한다.

[Jyophie]

레이아웃

• 페이지의 공통 구조를 편리하게 정의(Header, Footer, Sidebar, ...) 및 관리해줌
• 일반적으로 페이지 컴포넌트를 자식 요소로 감싸서 사용(페이지를 이동해도 고정적으로 레이아웃이 보여짐)

  
  // components/layout.js
  import React from 'react';
  import Header from './Header';
  import Footer from './Footer';

const Layout = ({ children }) => ( <>

<main>{children}</main>
<Footer />

</> );

export default Layout;

// pages/index.js import Layout from '../components/layout';

const Home = () => (

Welcome to the homepage!

);

export default Home;

### 템플릿
- 특정 유형의 페이지 또는 컴포넌트에 대한 구조와 디자인을 미리 정의해둔 형태(블로그 포스트, 제품 정보 페이지의 템플릿, ...)
- 일반적으로 레이아웃 내에 포함되어 사용되며, 데이터를 템플릿의 프로퍼티로 전달하여 동적으로 컨텐츠를 렌더링 할 수 있음

// components/blogTemplate.js const BlogTemplate = ({ title, content }) => (

{title}

);

export default BlogTemplate;

// pages/blog/[id].js import BlogTemplate from '../../components/blogTemplate'; import Layout from '../../components/layout';

const BlogPost = ({ post }) => (

);

export default BlogPost;

[wise-Ag]

리액트는 컴포넌트를 조합하여 페이지를 이룰 수 있습니다.

Layout

여러 페이지에서 공통 구조로 재사용되는 컴포넌트를 레이아웃으로 정리할 수 있습니다.

• 같은 레이아웃 페이지 간의 이동은 레이아웃 컴포넌트의 상태를 유지하며 리렌더링이 일어나지 않습니다.
• 레이아웃은 중첩하여 사용할 수 있습니다.
• 레이아웃에서 data-fetch가 가능합니다.

App router 고유의 layout.js 파일로 정의되고 사용됩니다. 폴더 단위로 중첩 사용할 수 있습니다. (/dashboard 내의 레이아웃은 하위 폴더인 /dashbord/public에도 적용됨) 모든 page.js에 적용되는 root layout이 필수입니다. app 디렉토리 최상위에 위치해아하며 html, body태그를 포함해야합니다.  Page router의 _app.js와 _document.js을 대체합니다.

Page router 레이아웃 컴포넌트를 생성 후 사용하는 페이지에서 import해서 사용할 수 있습니다. getLayout 프로퍼티로 중첩하여 사용할 수 있습니다.

Template

템플릿은 페이지를 공통 구조로 감싸는 점에서 레이아웃과 유사합니다. 레이아웃과는 달리 템플릿은 각 페이지에 대해 새로운 인스턴스를 생성하며, 상태가 유지되지 않고, 효과가 다시 동기화됩니다. 따라서 동일한 템플릿을 공유하는 경로 간에 이동할 때마다 새로운 자식 인스턴스가 마운트되고 DOM 요소가 다시 생성됩니다.

[hyeyoonS]

layout.tsx, template.tsx 파일 컨벤션은 App router에만 존재합니다. 또한 레이아웃을 이용하면 여러 페이지에서 공유하는 UI를 구성할 수 있습니다.

Page router

컨벤션은 아니지만, 레이아웃 컴포넌트를 생성 후 사용하는 페이지에서 import해서 사용할 수 있습니다. getLayout 을 이용해서 중첩해서 사용할 수 있습니다.

AppRouter

• layout.tsx

  • 레이아웃은 여러 페이지에서 공유하는 UI를 쓸 수 있습니다.
  • Navigating을 하는 시점에도 레이아웃은 상태를 보존하고 interactive하며 리렌더링이 일어나지 않습니다. 즉 유저가 UI를 변경하면 변경된 상태를 유지합니다.
  • 레이아웃의 중첩도 가능합니다. (부모 layout의 children으로 자식 layout 가능)

• template

  • layout을 먼저 정의하고 그 하위에 template이 위치해야 합니다.

  • 템플릿도 레이아웃과 비슷하게 각각의 자식 레이아웃이나 페이지를 감싸는 용도로 활용되지만, 레이아웃과 다르게 navigate할 때마다 자식요소마다 새로운 인스턴스를 생성합니다. ⇒레이아웃과 비슷한 목적을 위해 사용되지만 변화가 있을 경우 리렌더링된다는 뜻입니다.

  • 템플릿을 사용하는 예시

    1. useEffect, useState에 종속된 경우
    2. 프레임워크의 기본 동작을 바꿔야 하는 경우 (ex. 각 페이지마다 대체 콘텐츠를 다르게 표현하고 싶을 때)

[kanglocal]

레이아웃

• HTML의 공통 레이아웃을 설정.
• pages router에서는 _app.tsx 를 사용해 전체 레이아웃을 설정할 수 있었으나, 앱라우터에서는 디렉토리별로 레이아웃 설정이 세세하게 가능해졌다... > 팩트체크 필요
• 레이아웃끼리 중첩으로 사용가능하지만, 레이아웃간의 데이터 전달은 불가능하다.
• 페이지를 이동할때에도 레이아웃은 변경되지 않고 상태를 유지하기 때문에 상호작용이 일어나도 레이아웃은 변하지 않으며 해당 부분에는 리렌더링이 일어나지 않는다.
• layout.tsx 라는 이름으로 생성 가능하며, children(React.ReactNode 타입)을 매개변수로 받으며, 내부 디렉토리들을 알아서 children 변수로 받는다.

템플릿

• 레이아웃과 비슷하게 페이지를 감싸서 페이지나 자식 레이아웃에 공통된 부분을 관리할 때 사용된다.
• 하지만 페이지를 탐색할 때마다 새로운 인스턴스를 생성하기때문에 새로운 페이지가 마운트될 때 마다 새로운 인스턴스가 생성된다.
• 때문에 공유되는 각각의 페이지에 대해 새로운 인스턴스를 만들고, 페이지를 이동할 때 마다 새로운 페이지가 보여지게 된다.
• useEffect, useState에 종속된 경우 레이아웃을 대신에 템플릿을 사용할 수 있지만, 템플릿의 사용은 권장되지 않는다고 한다.
• tamplate.tsx로 정의해 사용하면 되고, 레이아웃과 중복으로 사용할 수 있다.