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

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

export default function Home() {
  return <SearchableLayout>
           <h1 className={style.h1}>인덱스</h1>
         </SearchableLayout>;
}

질문주신대로 위 코드처럼 페이지 컴포넌트의 부모 컴포넌트로 사용해도 레이아웃의 UI자체는 동일하게 렌더링 할 수 있습니다.

그러나 위 방법에는 큰 단점이 하나 있는데요 바로 페이지 이동시에 레이아웃 컴포넌트가 무조건 언마운트 된다는 점 입니다.

위 방법으로 레이아웃을 적용하면 동일한 레이아웃을 사용하는 페이지로 이동하게 되더라도 무조건 레이아웃이 언마운트되었다가 다시 마운트 되기 때문에 불필요한 렌더링 리소스를 낭비하게 됩니다.

따라서 만약 레이아웃 컴포넌트내에서 State라도 사용하고 있었다면 페이지가 이동될 때 마다 State도 초기화 될 것입니다. 이렇게 동작하는 이유는 페이지 이동시에는 현재 페이지 컴포넌트가 언마운트 되기 때문입니다.

그러나 반면 getLayout 메서드를 활용해 App 컴포넌트에서 일괄적으로 중첩 레이아웃을 적용하도록 설정해주시면 이런 문제는 발생하지 않습니다.

이유는 페이지 이동이 아무리 발생한다고 해도 App 컴포넌트가 언마운트 되지는 않기 때문입니다. App 컴포넌트는 업데이트만 될 뿐이죠 따라서 동일한 레이아웃을 사용하는 페이지간의 이동을 적은 렌더링 리소스만으로 처리할 수 있어집니다.

그리고 그럼으로써 State의 초기화까지 방지할 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다. Wl990님, 질문해주셔서 감사합니다!

Next.js에서 페이지별 레이아웃을 구현하는 방식인 getLayout 메서드를 학습 중인 것 같네요. 질문자님께서 제안하신 것과 같이, React Router에서는 레이아웃 컴포넌트를 특정 라우트 내에서 감싸는 방식으로 쓰는 것이 직관적이고 간단하게 느껴질 수 있습니다. 하지만, Next.js에서는 그 구조가 조금 다르게 설계되었습니다.

원인 및 차이점

1. 상태와 성능 관리:

   • getLayout을 사용하는 이유 중 하나는 페이지 전환 시 상태를 유지하면서도 레이아웃이 재마운트 되지 않게 하기 위함입니다. getLayout을 사용하면 페이지 이동 시에도 레이아웃의 상태가 초기화되지 않고 그대로 유지됩니다. 이는 특히 페이지가 많은 상태를 보유하고 있을 때 유용합니다.
     

2. 유연한 레이아웃 지원:

   • Next.js는 기본적으로 파일 기반 라우팅을 제공하는데, 여러 페이지에서 서로 다른 레이아웃을 사용해야 할 때 getLayout 메서드를 통해 다르게 설정할 수 있어 유연성을 제공합니다.
     

3. 중앙 관리 가능성:

   • getLayout 패턴을 사용하면 _app.tsx에서 모든 레이아웃을 중앙에서 관리하게 되므로, 유지보수 시점에 레이아웃 로직을 한 곳에서 파악하고 수정할 수 있는 이점이 있습니다.
     

또한, 이 링크에서는 getLayout 메서드를 활용하는 방법에 대해 상세히 설명하고 있습니다. 지속된 질문과 답답함을 해소하기 위해 참조가 되었으면 좋겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 다음 강의 진행 중 문제가 생기면 언제든지 질문해 주세요.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.