학습 Next.js - Day 04 / 글로벌 레이아웃 설정

이유승·2024년 9월 11일

Next.js 학습

목록 보기

5/27

1. Day 04

글로벌 레이아웃 설정

-> App 컴포넌트는 Next.js의 커스텀 App 컴포넌트로, Next.js에서 각 페이지를 렌더링할 때 공통으로 사용되는 엔트리 포인트.
-> 여기서 Component는 현재 렌더링될 페이지 컴포넌트이고, pageProps는 해당 페이지에 전달되는 props.
-> 즉, App 컴포넌트는 모든 페이지에 대해 공통적으로 레이아웃을 설정하고, 페이지 전환 시에도 유지.
-> GlobalLayout 컴포넌트는 모든 페이지에서 공통적으로 사용되는 레이아웃을 정의한 컴포넌트.
-> Component가 실제 렌더링될 페이지이며, 이를 GlobalLayout의 children으로 전달하여 해당 페이지의 콘텐츠를 전역 레이아웃 안에 표시.

글로벌 레이아웃 적용의 원리

-> _app.tsx에서 전역 레이아웃을 적용하는 것은, 모든 페이지가 전역적으로 같은 레이아웃을 사용하도록 보장하기 위한 방법.
-> GlobalLayout으로 감싸진 페이지 콘텐츠가 모든 페이지에서 동일한 스타일과 구조를 유지할 수 있게 하며, header와 footer 같은 공통된 UI 요소를 재사용.
-> 이를 통해, 각 페이지마다 공통적인 레이아웃을 반복해서 정의할 필요가 없으며, 레이아웃 변경 시 하나의 컴포넌트만 수정하면 전체 페이지에 적용.

페이지별 레이아웃 설정

Home.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

-> Home 컴포넌트에서 커스텀 레이아웃을 지정하는 getLayout을 정의. getLayout을 호출하면서 인자로 page를 전달하면, 그 페이지는 SearchableLayout이 감싸진 상태에서 반환된다.

const getLayout = Component.getLayout ?? ((page: ReactNode) => page);

<GlobalLayout>
    {getLayout(<Component {...pageProps} />)}
</GlobalLayout>

-> getLayout을 호출하는 곳은 당연히 _app 파일. _app으로 전달되는 컴포넌트에 getLayout 함수가 존재하는 경우, 이를 그대로 전달. 그렇지 않은 경우에는 그냥 page 파일을 전달.
-> Home 컴포넌트에는 getLayout이 정의되어있기 때문에, 이 조건에 의해 _app에서 Home 컴포넌트만 SearchableLayout을 적용받게 된다.

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactNode) => ReactNode;
};

-> NextPage는 Next.js에서 페이지 컴포넌트의 기본 타입을 의미. Next.js에서 페이지 컴포넌트를 작성할 때 NextPage라는 타입을 지정하여 해당 컴포넌트가 페이지로서 동작함을 명시할 수 있다.
-> NextPage 타입을 확장하여 페이지별로 동적인 레이아웃을 적용할 수 있는 getLayout 함수를 정의할 수 있는 역할을 수행한다.

Home 컴포넌트에만 있는 getLayout 함수가 페이지별 레이아웃을 구분하는 기준으로 사용된다.
_app에서 컴포넌트를 불러올 때, Home 컴포넌트의 getLayout 함수가 호출되어 SearchableLayout은 Home 컴포넌트에서만 보여지게 된다.