2023.05.24[nextjs]

📖오늘 배운  것

nextJS로 공통 레이아웃 구현하기

 

진행하는 프로젝트 레이아웃 작업을 하면서 독서모임 상세페이지와 독서모임 채팅페이지가 같은 탭을 공유하고 있어서 해당 페이지 간에 공통 레이아웃을 작업해야 했다.

react를 사용할 땐 react router의 nested routes를 이용해서 간단하게 구현할 수 있었는데 nextjs에서는 어떤 식으로 구현할 수 있을지 감이 안잡혔다. 그래서 공식문서를 찾아보던 중 

https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts

Routing: Pages and Layouts | Next.js

Per-Page Layout이라는 섹션을 발견했고 해당 방법을 적용하기로 했다.

 

먼저 공통 레이아웃의 경우 그냥 컴포넌트 만들어서 바로 적용하면 되었는데 부분 페이지에서만 사용하는 공통 레이아웃의 경우 추가 작업이 필요했다.

일단 진행한 것은 공통 레이아웃을 정의한 layout 컴포넌트를 만드는 것이었다. 이 외에도 다양한 레이아웃 컴포넌트들이 나올 것 같아서 layout이라는 폴더를 만들어서 하위에 작성해주었다.

import React, { ReactNode } from 'react';

import RecruitTab from '@/components/recruit/RecruitTab';

import Layout from './Layout';

function RecruitLayout({ children }: { children: ReactNode }) {

  return (

    <Layout>

      <RecruitTab />

      {children}

    </Layout>

  );

}

export default RecruitLayout;

 

이렇게 설정한 레이아웃을 해당 컴포넌트들에서 사용할 수 있도록 getLayout을 사용하였다.

RecruitDetailPage.getLayout = function getLayout(page: ReactElement) {

  return <RecruitLayout>{page}</RecruitLayout>;

};

해당 레이아웃을 사용하려는 컴포넌트에 getLayout 프로퍼티를 추가하여 해당 페이지에 레이아웃을 적용한다. 그리고 이 getLayout을 적용시키기 위해 _app에서 설정해주어야 한다. 기존에는 그냥 컴포넌트들이 바로 렌더링이 되었다면 지금은 getLayout이 있을 때 해당 레이아웃을 거쳐서 렌더링될 수 있도록 해줘야한다.

 

export default function App({ Component, pageProps }: AppPropsWithLayout) {

  const [queryClient] = React.useState(() => new QueryClient());

  const getLayout =

    Component.getLayout || ((page: ReactElement) => <Layout>{page}</Layout>);

  return (

    <QueryClientProvider client={queryClient}>

      <Hydrate state={pageProps.dehydratedState}>

        <RecoilRoot>

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

          <LoginModal />

        </RecoilRoot>

      </Hydrate>

    </QueryClientProvider>

  );

}

그래서 이렇게 컴포넌트에 getLayout이 있다면 해당 레이아웃을 적용하고 없다면 공통 레이아웃을 적용하도록 해주었다.

 

이렇게 설정함으로써 Layout.tsx에서는 전체 공통 레이아웃을 설정할 수 있게 되었고 필요한 페이지마다 부분 공통 레이아웃을 추가로 설정할 수 있게 되었다!

 

 

 

💭배운 점

 

처음에는 아무래도 익숙한 방법이 편하게 느껴져서 react는 react router로 중첩 라우팅이랑 outlet 사용하면 바로 적용되는데 이 과정에 조금 번거롭게 느껴지기도 했고 처음 볼 때 잘 이해가 안된다고 느껴지기도 했다. 하지만 공식문서의 예시들을 보고 적용해보니 보이는 것만큼 어려운 과정이 아니었음을 알게되었다. 또한 공식문서에서 만약 타입스크립트를 사용하는 경우에 대한 타입 예시도 보여줘서 무리없이 적용할 수 있었다. nextjs만의 특징들을 많이 사용해보고 싶다는 생각이 들었다!