앱을만들때 재사용하는 요소들이 있는데, 페이지가 100개면 같은 컴포넌트를 100개 복붙할껀 아니잖씀 ?
이럴땐 layout.js 파일을 만들어서 쓰면된다. next js에서 자동으로 생성해줌 ㅎ 좋쿠만.
next js 의 작동순서는, "layout js파일 -> 각 컴포넌트로 이동 -> 페이지 실행" 이다.
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
<RootLayout>
123123 // children컴포넌트로 자동 변환 되는거임.
</RootLayout>
그래서 솔루션이 뭐냐면 <Navigator />를 각 페이지마다 넣어주는게 아니라,
Layout폴더에 넣어주면 된다. 만약에 footer나 header를 넣어주고 싶으면 각 100페이지에 넣을 필요가 없음. layout폴더에 넣어주면 컴포넌트를 children props로 인식해서 모든 페이지에 불러와줘서 편리하게 사용가능하다.
(중복처리해주는 효과가 대단쓰..)
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Navigation />
{children}
</body>
</html>
);
}layout에도 특별한 기능이 있다. 한 페이지 만의 layout을 만들 수 있다. << 엄청 유용한 기능: 왜냠 보통 웹페이지 같은경우엔 두 개, 또는 세개의 레이아웃을 가지고 있기때문. 특정페이지의 layout은 특정 페이지를 만드는 폴더 내에 "layout"으로 이름을 지정하여 만들어 주면 된다.
신기한점은 상위폴더에 적용된 layout이 하위에도 적용이 된다는거다.(즉 중첩가능하게 설계되어있는거임)
즉, 레이아웃들이 상쇄되는게 아니다.
예를들어 about-us폴더에 layout.jsx파일을 생성해서 적용시켰다면, 하위폴더(예시: about-us/company/jobs/sales)에도 적용이된다는 뜻.오호이제 상위 -> 하위 폴더로 이동하면서 레이아웃을 구성해주면 아래와같이 실행시켜주는거임.
<상위Layout>
<하위1Layout>
<하위2Layout>
</하위2Layout>
</하위1Layout>
</상위Layout>
Interested in coding, meat lover, in love with dogs , enjoying everything happens in my life.