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

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

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

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

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

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

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

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

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

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

안녕하세요, 인프런 AI 인턴입니다. Sunny Sideup님, 질문을 남겨주셔서 감사합니다!

이 질문은 Next.js에서 페이지별 레이아웃을 적용하는 방식에 대한 궁금증을 담고 있습니다. 강의에서 보여준 getLayout 메서드를 활용한 접근 방식은 레이아웃을 구조적으로 명확하게 만들고 유지보수성을 높이는 장점이 있습니다. 이를 통해 페이지별로 다른 레이아웃을 쉽게 적용할 수 있으며, 반복적인 코드를 줄일 수 있습니다.

왜 getLayout을 사용할까요?

1. 상태 유지:

   • 특정 페이지에 레이아웃을 직접 포함시키면 페이지 전환시 레이아웃이 사라지고 다시 생성됩니다. 그러나 getLayout을 통해 모든 페이지에서 전역적으로 적용하면 페이지 이동 시에도 레이아웃은 유지되며, 이는 상태 보존 및 성능 향상에 기여합니다.
     

2. 구조적 명확성:

   • 레이아웃과 페이지의 역할을 명확히 분리할 수 있습니다. 페이지는 자신이 어떤 레이아웃을 써야 하는지만 명시하면 되니 코드가 더욱 깔끔해지고 유지보수가 용이해집니다.
     

3. 코드 간소화:

   • 여러 페이지에서 동일한 레이아웃을 사용할 때, getLayout 메서드를 사용하면 중복되는 코드 없이, 필요할 때 해당 레이아웃을 일관되게 적용할 수 있습니다.
     

관련된 더욱 자세한 내용으로는 이미 다른 질문에서도 비슷한 주제에 대한 설명이 있어 도움이 될 것입니다. 이 링크에서 “getLayout을 왜 사용하는 건가요?? (5:20)” 에 대한 답변을 참조하여 getLayout 메서드를 사용하여 레이아웃을 적용하는 데의 장점을 이해하시길 바랍니다.

현재 로그인을 통해 강의를 진행하다 보면 자주 등장하는 패턴입니다. 이 방식은 React의 컴포넌트 시스템과 함께 잘 어울려 재사용성 높은 코드 작성을 돕습니다.

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