Layout, Template

여러 페이지 간에 공유되는 UI.

루트 레이아웃 : 앱 디렉토리의 최상위 레벨에 정의되며 모든 경로에 적용된다.

app 디렉토리에 루트 레이아웃이 포함되어야 한다.

페이지를 변경할때 레이아웃은 리렌더링될까?

레이아웃은 리렌더링 되지 않고 페이지만 렌더링되는 것이다.

그런데 레이아웃을 리렌더링을 하고 싶은 경우에는...

템플릿을 사용하면 된다!

레이아웃과 유사하며 자식 레이아웃이나 페이지를 감싸는 역할을 한다.

탐색할 때 자식 요소마다 새로운 인스턴스를 생성한다.

=> 사용자가 템플릿을 공유하는 경로 사이를 탐색할 때 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 보존되지 않고, 효과가 다시 동기화된다.

따라서 Layout과 Template은 공존할 수 없고 둘 중 하나 선택해야 한다.

[Routing] NEXT.js beta 한글 번역 : Routing - Pages and Layouts / 페이지와 레이아웃

Routing - Pages and Layouts : 페이지와 레이아웃 Next.js 13의 App Router에는 페이지, 공유 레이아웃 및 템플릿을 쉽게 만들 수 있는 새로운 파일 규칙이 도입되었습니다. 이 페이지에서는 Next.js 애플리케이

space-rumi.tistory.com

[Next.js] Next.js Page, Layout, Template 배우기

Next.js에는 page.tsx, layout.tsx, template.tsx가 존재합니다.(js일 경우엔 .jsx)Page.tsx는 말그대로 페이지를 구성하고, Layout.tsx는 그 페이지를 감싸는 레이아웃을 지정해줍니다.(자세한 내용은 공식문서 참

velog.io

요리조리