# Pages and Layouts
Next.js는 app routing convention에 정의된 이름을 가지는 파일들로 계층 구조를 형성한다.
그 중 가장 중요한 두 가지 요소는 page와 layout이다.
page: 각 route에 unique해야하며 각 route subtree의 leaf이다.
layout: 여러 페이지에 공유되며 navigation 시 layout의 state는 보존된다.
root layout: 가장 윗단 layout, 즉 app 폴더 내 layout은 root layout이라 칭하며 항상 <html>과 <body>를 가져야 한다.
Layout 컴포넌트는 Page 컴포넌트를 감싸고 있다.
실제로 app directory의 layout.tsx와 page.tsx를 다음과 같이 작성한 후 개발자 도구에서 확인해보면 layout.tsx의 div가 pages.tsx의 div를 감싸고 있는 것을 확인할 수 있다.
nested route의 경우 다음과 같은 계층 구조가 형성된다.
app\posts 폴더를 생성 후 그 곳에 새로운 page.tsx를 추가한다. 그 이후 localhost:3000/posts에 접속하면 다음과 같은 페이지가 나타난다.
여기서 주목할 점은 layout div는 다시 렌더 된 것이 아니라는 점이다.
개발자 도구를 이용하여 이를 확인할 수 있는데, layout div의 background-color를 직접 다른 색으로 수정하고 각 페이지의 링크를 클릭하여 localhost:3000과 localhost:3000/posts로 이동할 때 layout div의 background-color가 yellow로 돌아가지 않는 것을 볼 수 있다.
이러한 방식을 통해 route 변경 시 렌더 상 효율성을 가져가는 것으로 보인다.
# Templates
template은 기본적으로 layout과 매우 유사하나 route 변경 시마다 인스턴스가 생성된다는 차이점이 있다.
즉, state가 보존되지 않으며 다시 렌더가 일어난다.
route에 template.tsx를 추가하여 생성할 수 있으며 다음과 같이 나타난다.
route 변경 시 template이 다시 렌더 되는 것 또한 layout에서와 비슷하게 개발자 도구에서 확인할 수 있으며, 개발자 도구에서 직접 색 변경 후 링크를 타면 원래 색으로 돌아온다는 것으로 확인할 수 있다.
'Web development > Next.js Docs 파헤치기' 카테고리의 다른 글
| 2.3 Route Groups & Dynamic Route (0) | 2023.07.06 |
|---|---|
| 2.2 Linking and Navigating (0) | 2023.06.16 |
| 2.0 Routing (0) | 2023.06.16 |
| 1. Next.js 시작하기 (0) | 2023.06.13 |
