2.8) 레이아웃 설정시 getLayout 메서드말고 if문 써서... - 인프런

한 입 크기로 잘라먹는 Next.js(15+)

2.8) 페이지별 레이아웃 설정하기

2.8) 레이아웃 설정시 getLayout 메서드말고 if문 써서 이렇게 해도 될까요?

해결된 질문

작성

163

레이아웃 컴포넌트의 경우 여러 페이지에 공통적으로 들어가야 하는 것이기 때문에, _app.tsx에 넣어야 하는 것은 이해했습니다.

그리고 모든 페이지에 들어가는 레이아웃이 아닌 특정 페이지만 들어가는 레이아웃의 경우에 정환님 같은 경우에는 getLayout이라는 메서드를 해당 레이아웃을 필요로 하는 페이지 컴포넌트 함수에 메서드로 주시고 _app.tsx에서는 그 메서드를 불러오게끔 하셨는데요.

제가 머리가 나빠서인지는 모르겠지만, 뭔가 이런 메서드로 레이아웃을 관리하니까 이해하기 어렵고 뭔가 직관적으로 다가오는 느낌이 없어서 힘들더라구요..

그래서 그냥 router와 if문을 이용해서 특정 페이지의 경우에만 searchable 레이아웃이 나오게 하고, 아닌 경우에는 그냥 페이지를 리턴하도록 하는 게 저한테는 뭔가 더 직관적..? 으로 다가오는데 이런 식으로 사용해도 되는지 궁금해서 여쭈어봅니다.. (코드는 밑에 같이 써놓았습니다!)

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const isSearchableLayoutPage = router.pathname === '/' || router.pathname === '/search';

  return (
    <GlobalLayout>
      {isSearchableLayoutPage ? (
        <SearchableLayout>
          <Component {...pageProps} />
        </SearchableLayout>
      ) : (
        <Component {...pageProps} />
      )}
    </GlobalLayout>
  );
}

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 shawn님 이정환입니다.

우선 위처럼 조건문으로 관리해주셔도 동일하게 레이아웃을 적용하실 수 있습니다!

그리고 머리가 나쁘시다뇨! 전혀 아닙니다 😢 이렇게 보다 쉬운 방법을 떠올리신 걸 보면 분명 반대로 머리가 좋은 편이실거에요!

사실 페이지 라우터 버전의 레이아웃 설정이 다소 복잡한게 맞습니다! 그리고 이런 복잡함은 향후에 배우시게 될 페이지 라우터의 단점으로 지목되는 부분입니다. 게다가 앱 라우터에서는 이런 복잡함을 해결하기 위해 새로운 레이아웃 패턴을 도입하고 있기도 합니다. 그러니 딱 와닿지 않으셔도 크게 걱정하실 필요는 없을 것 같습니다 😃

shawn

질문자

감사합니다. 😊

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Shawn님의 질문에 도움을 드리고자 합니다.

질문하신 내용은 특정 페이지에만 특정 레이아웃을 적용하는 방법에 대한 것이며, getLayout 메서드 대신 _app.tsx에서 router와 if문을 사용하는 방법에 대한 가능성을 탐색하고 계신 것으로 보입니다. 이와 관련하여, 질문자님이 제시한 코드 방식 역시 유효한 접근법 중 하나입니다. 사실, Next.js에서는 여러 가지 방법을 통해 페이지별 레이아웃을 조건부로 적용할 수 있는데, 이는 개발자의 선호나 특정 프로젝트의 요구에 따라 달라질 수 있습니다.

이전 질문에서 다뤄진 방법과 관련하여, 다음 링크를 참조하여 도움을 얻을 수 있습니다:

“getLayout을 왜 사용하는 건가요?? (5:20)” 질문에서는 getLayout 메서드를 이용한 페이지별 레이아웃 설정 방법에 대해 설명하고 있습니다. 이전의 질문과 답변에는 getLayout 메서드를 통해 페이지별로 다른 레이아웃을 적용하는 방식에 대한 상세한 설명과 사용 이유가 포함되어 있습니다. 이 방법은 각 페이지 컴포넌트에서 명시적으로 레이아웃을 정의하고, _app.tsx에서는 이를 동적으로 적용할 수 있도록 해주어 프로젝트의 구조를 명확히 할 수 있는 장점이 있습니다.

Shawn님의 경우와 같이, 특정 페이지에만 특정 레이아웃을 적용하고자 하는 상황에서 router와 조건문을 사용하는 방식은 특히 복잡하지 않은 레이아웃 구조에서는 더 직관적이고 간단하게 느껴질 수 있습니다. 그러나 프로젝트의 규모가 커지거나 레이아웃이 다양해질 경우, getLayout과 같은 패턴을 사용하는 것이 유지보수 측면에서 더 효율적일 수 있습니다.

결론적으로, 어떤 방식을 선택할지는 프로젝트의 특성, 개발 팀의 선호도 및 유지보수의 용이성을 고려하여 결정하는 것이 좋습니다. 두 가지 방식 모두 Next.js에서 유효하며, 상황에 따라 적절히 선택하여 사용하시면 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

2.8) 레이아웃 설정시 getLayout 메서드말고 if문 써서 이렇게 해도 될까요?