[ Next.js14 ] 04. Layouts

sohyun·2024년 2월 5일
0

Next.js14

목록 보기
4/9
post-thumbnail

Layout의 필요성

재사용하는 요소들이 있다. 100페이지가 넘는다면 100번을 복붙할 수는 없다.
예를들면 footer라던지, 네비게이션이라던지 말이다.

그럼 어떻게 작동하는가?

기본적으로는 레이아웃이 먼저 렌더되고 url로 인식한 컴포넌트를 렌더하게 됨
그리고 무조건 root 레이아웃(html,body가 포함된)을 가져오고 시작한다.

중첩 layout

about 페이지만의 다른 특별한 layout을 만들수있다면?

적용할 폴더에 layout.tsx를 만들어 rootlayout에서처럼 children을 둔채
html 태그나 body 태그는 지워주고 원하는 블럭태그로 묶어준다.

중첩 layout 동작 방식

1.root 레이아웃을 가져온다.
2.url을 확인한다.
3.최상위 폴더부터 layout 파일을 확인해본다
4.있다면 layout 렌더링 후
5.하위 폴더로 점점 내려간 뒤 페이지가 있는 컴포넌트를 발견하면 렌더된다.

주의! 만약 경로로써 존재하는 폴더(하위page.tsx가 존재하지 않는)에 url로 접근할때에는 rootlayout만 적용됨

profile
냠소현 개발일지

0개의 댓글