Layout 을 추가하니, ThumbnailList가 2번 그려지는 현상이 있어요.

Question

"전체 레이아웃 잡기" 강의를 시청하며 따라하고 있는데,

main.jsx 에서 <App /> 을 <Layout> 태그로 감쌌더니, ThumbnailList 가 연달아 2번 나오고 있습니다.

createRoot(document.getElementById('root')).render(
   <StrictMode>
    <Layout>
    <App />
    </Layout>
   </StrictMode>
)

<StrictMode> 때문에 그런가 싶어서 지워봐도 2번 그리는 현상은 동일합니다. <Layout>을 지우면 ThumbnailList가 한번만 나옵니다.

이런 현상이 발생하는 원인이 너무 궁금합니다.

코배투 · Answer

안녕하세요. 어떤 상황인지 확인하기 위해 main.jsx 와 Layout.jsx 코드 전체 스크린샷을 보내주실 수 있을까요?

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. hanny856님. ThumbnailList 가 2번 렌더링되는 상황을 겪고 계시는군요. React.StrictMode 는 종종 컴포넌트를 두 번 렌더링하여 문제를 조기에 발견하도록 돕는 역할을 합니다. 그러나, StrictMode 를 제거해도 같은 현상이 일어난다면 다음 몇 가지 원인을 점검해보실 수 있습니다. 가능성 있는 원인 및 해결 방안 중첩된 컴포넌트 렌더링: Layout 컴포넌트 내에서 ThumbnailList 가 중첩되어 반복적으로 렌더링되는 코드가 있는지 확인해 보세요. Layout 의 구조를 검토하여 중복으로 인해 발생하는지 확인해야 합니다. 부모 컴포넌트 또는 라이브러리의 영향: App 또는 Layout 컴포넌트 내부에서 ThumbnailList 와 관련된 추가적인 반복 로직이 있는지 점검하세요. 감지되지 않은 구조적인 문제로 인한 추가적인 렌더링 가능성을 파악해야 합니다. 이벤트 연결 등의 로직 점검: ThumbnailList 가 이벤트 등의 변화에 대응하여 예상치 못하게 여러 번 렌더링 되는지도 확인해 보세요. 추가 조치 작성하신 모든 컴포넌트, 특히 Layout 과 App 의 코드를 다시 한 번 검토하고, 불필요하게 호출되는 부분이 없는지 살펴보세요. 개별 컴포넌트의 콘솔 로그를 활용하여 어떤 시점에서 몇 번 렌더링되는지를 추적하는 것도 유용합니다. 이와 관련된 유사한 문제를 다룬 사이트 전체 Route 구조 짜기 영상 10분쯤 코드가 똑같은데 연결이 안되요 게시글도 참고해 보세요. 코드를 작성하면서 발생할 수 있는 오류를 해결하는데 도움이 될 수 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

Layout 을 추가하니, ThumbnailList가 2번 그려지는 현상이 있어요.

가능성 있는 원인 및 해결 방안

추가 조치