홈 에서의 코드를 보면 전체를 감싸는 main이 이렇게 적혀있다.
<main className="w-screen min-h-screen bg-gray-100">검색 페이지에서 코드를 보면 전체를 감싸는 main이 이렇게 적혀있다.
<main className="w-screen min-h-screen bg-gray-100">스타일링 코드 뿐만이 아니라. 페이지를 둘러보니
<main className="w-screen min-h-screen bg-gray-100">
<main className="m-auto bg-white max-w-screen-2xl">
<NavBar/>
-- 이런 저런 것들 --
</main>
</main>이런 방식으로 구현되는 형태가 많았다.
여러 페이지들을 제작하면서 반복적인 형태가 만들어지는 경우는 비일비재 하다. 여기서 아무 조치를 취하지 않은 상태에서 만약에 배경화면을 파란색으로 해줘야한다는 피드백이 왔다고 가정해보면, 각각의 페이지들의 스타일 속성을 하나하나 수동으로 blue로 변경해준다고 하면 불편하지 않을까?
Placing Universally Used Components in the Root Layout
cna로 앱을 생성했을때 app폴더에 layout.tsx 라는 파일이 존재하는데
이런식으로 html 태그 안에 body에 children prop을 감싸고 있다.
이를 통해서 전체적으로 페이지마다 해당하는 컴포넌트들을 렌더링 할수 있게 되는 것이지만, 여기에 children뿐만 아니라 다른 내용을 추가하게 되면 어떤 페이지에서던 추가한 내용이 보여질 것이다!
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<main className="w-screen min-h-screen bg-gray-100">
<main className="m-auto bg-white max-w-screen-2xl">
<NavBar />
{children}
</main>
</main>
</body>
</html>
)
}이렇게 해주면 페이지마다 공동적으로 NavBar 컴포넌트가 존재하게 된다!
물론 이전에 작성했던 페이지에서는 NavBar를 제거해줘야겠지만
그래도 스타일속성을 변경할때도 layout에서만 변경을 해주면 공통적으로 전부 navBar를 감싸는 main 태그의 색이 변하게 되니 유지보수는 더 수월해졌다.
공통적으로 사용하는 코드를 layout으로 옮겼기 때문에 각 페이지의 코드가 깔끔해졌다!
스타일 속성 수정도 간단하다!
예를 들어서 NavBar를 덮는 main태그의 배경화면 색상을 green으로 변경해야한다면
<main className="m-auto bg-green-400 max-w-screen-2xl">
<NavBar />
{children}
</main>NavBar 위에 있는 main 태그의 배경만 바꾸면 페이지마다 해당 스타일이 적용된다
Nested Components
restaurant/[slug] 페이지와
restaurant/[slug]/menu 페이지에서
공통적으로 사용되는 구간이 존재하는데, 아래와 같다
<Header/>
<div className="flex items-start justify-between w-2/3 m-auto 0 -mt-11">
-- 이런 저런 것들 --
</div>이걸 layout.tsx에 옮기는 것은 전체 페이지에 적용되기 때문에, 일정 페이지에서 공통적인 부분을 표시하기 위해서 사용하는 방법으로는 적절하지 않다.
해법은 간단하다 [slug] 페이지 경로에서 layout.tsx를 따로 만들어서 공통된 내용을 추가해주면 된다!
export default function RestaurantLayout({ children }: { children: React.ReactNode }) {
return (
<main>
<Header />
<div className="flex items-start justify-between w-2/3 m-auto 0 -mt-11">{children}</div>
</main>
)
}
이렇게 해주면 restaurant/[slug] 경로 하위에 존재하는 모든 페이지에서 위의 공통된 컴포넌트가 적용된다.
restaurant/[slug] 페이지와
restaurant/[slug]/menu 페이지에서 사용했던 내용을 지워주면 리팩토링 끝
Updating the Head Meta for Each Page
지금 들어가는 페이지마다 상단에 title을 보면 Create Next App이라고 설정되어있는 것을 볼수 있다. 들어가는 페이지마다 상단의 title을 변경하고 싶다면 각각의 페이지에 metadata를 설정해주면 된다.
export const metadata: Metadata = {
title: '냠냠쩝쩝',
description: '밥은 먹고 다니세요?',
}페이지 메소드 위에 이렇게 metatData를 선언해주면
이렇게 바뀌게 된다.
각각의 페이지마다 다른 타이틀을 설정하고 싶다면, 페이지마다 metaData를 설정해주면 된다.
