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

안녕하세요.

개발자 도구를 직접 열어 트리 구조까지 확인해보셨다니 정말 인상적입니다.

우선 궁금해하신 부분에 대해 먼저 답변드리면, 리액트 개발자 도구에 표시되는 단순한 라벨링 차이일 뿐 실제로 컴포넌트가 두 번 실행되는 것은 아니므로 걱정하지 않으셔도 됩니다.

조금 더 설명드리자면, DevTools는 우리가 작성한 컴포넌트만 보여주는 것이 아니라 Next.js가 내부적으로 라우팅을 위해 감싸는 래퍼 컴포넌트들까지 함께 표시합니다.

/ 경로의 경우 (with-layout)이 Header와 Footer를 포함한 레이아웃이기 때문에, Next.js 내부 래퍼와 실제 레이아웃이 함께 보이면서 WithLayout이 두 번 나타나는 것처럼 보일 수 있습니다.

반면 /login의 AuthLayout은 children을 그대로 전달하는 비교적 단순한 구조이기 때문에, 트리에서는 AuthLayout 한 번과 OuterLayoutRouter(Next.js 내부 래퍼) 형태로 표시됩니다.

따라서 이는 화면이 실제로 두 번 렌더링되는 문제가 아니라 DevTools의 표시 방식 차이에서 비롯된 현상입니다.

추가로 만약 (auth)/layout.tsx 파일도 단순하게 children만 렌더링하는 게 아니라 다른 태그를 추가해보면 똑같이 중첩된 것처럼 보인답니다 😀

(예를들면 아래처럼..)

export default function AuthLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <h1>ddd</h1>
      {children}
    </>
  );
}

안녕하세요, 인프런 AI 인턴입니다. hwnii님.

MainLayout이 중첩되어 나타나는 문제에 대해 궁금해 하신 것 같습니다. 리액트나 Next.js에서는 레이아웃 구조를 어떻게 설정하느냐에 따라 컴포넌트가 중첩되어 렌더링될 수 있습니다.

이유와 해결 방법

1. 중첩된 레이아웃:

   • Next.js에서 각 경로에 대해 레이아웃을 정의할 수 있고, 특정 그룹의 경로에 대해 중첩 레이아웃이 적용될 수 있습니다. 이는 상위 레이아웃이 하위 경로에서도 적용되기 때문입니다.
     
   • 정상적인 경우라면 프로젝트 폴더를 분석할 때 특정 그룹의 layout.tsx가 상위 경로 레이아웃과 결합되어 나타날 수 있습니다.
     

2. 원하는 레이아웃 구조 설정:

   • 각각의 경로에 대해 명확하게 레이아웃을 설정하여 중첩을 피하고자 할 경우, 해당 레이아웃 구조가 올바르게 설정되어 있는지 확인해야 합니다. 복수의 레이아웃이 중첩되어야 하는 경우가 아니라면, 특정 페이지나 그룹이 상위 레이아웃을 상속받지 않도록 설정하는 것도 고려할 수 있습니다.
     

프로젝트 폴더 구조:

• 올바르게 설정된 폴더 구조인지 다시 한번 확인해 보시는 게 좋습니다. (with-layout), (auth)와 같은 폴더가 각각의 layout.tsx 파일을 포함하고 있다면, 이 레이아웃이 각각의 그룹이나 페이지에 대해 어떻게 적용되는지가 중요합니다. 중첩을 피하려면 리팩토링이 필요할 수 있습니다.
  

위와 같은 분석과 해결 방안을 통해 정상적으로 레이아웃이 나타날 수 있도록 구조를 재검토하셔야 할 것입니다. 추가적으로 Next.js 공식 문서나 관련된 학습 자료를 통해 레이아웃에 대한 이해를 더 깊게 하실 수 있습니다.

추가적인 문서를 위해 인프런의 강의 Q&A에서 다음과 같은 유사한 질문과 답변을 참조하실 수 있습니다:
- 컴포넌트 중첩 렌더링 및 해결 방법
- Next.js 레이아웃 구성 이해하기

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