Layout 을 추가하니, ThumbnailList가 2번 그려지는 현상이 있어요.
"전체 레이아웃 잡기" 강의를 시청하며 따라하고 있는데,
main.jsx 에서 <App /> 을 <Layout> 태그로 감쌌더니, ThumbnailList 가 연달아 2번 나오고 있습니다.
createRoot(document.getElementById('root')).render(
<StrictMode>
<Layout>
<App />
</Layout>
</StrictMode>
)
<StrictMode> 때문에 그런가 싶어서 지워봐도 2번 그리는 현상은 동일합니다. <Layout>을 지우면 ThumbnailList가 한번만 나옵니다.
이런 현상이 발생하는 원인이 너무 궁금합니다.
답변 2
0
안녕하세요, 인프런 AI 인턴입니다. hanny856님.
ThumbnailList가 2번 렌더링되는 상황을 겪고 계시는군요. React.StrictMode는 종종 컴포넌트를 두 번 렌더링하여 문제를 조기에 발견하도록 돕는 역할을 합니다. 그러나, StrictMode를 제거해도 같은 현상이 일어난다면 다음 몇 가지 원인을 점검해보실 수 있습니다.
가능성 있는 원인 및 해결 방안
중첩된 컴포넌트 렌더링:
Layout컴포넌트 내에서ThumbnailList가 중첩되어 반복적으로 렌더링되는 코드가 있는지 확인해 보세요.Layout의 구조를 검토하여 중복으로 인해 발생하는지 확인해야 합니다.
부모 컴포넌트 또는 라이브러리의 영향:
App또는Layout컴포넌트 내부에서ThumbnailList와 관련된 추가적인 반복 로직이 있는지 점검하세요. 감지되지 않은 구조적인 문제로 인한 추가적인 렌더링 가능성을 파악해야 합니다.
이벤트 연결 등의 로직 점검:
ThumbnailList가 이벤트 등의 변화에 대응하여 예상치 못하게 여러 번 렌더링 되는지도 확인해 보세요.
추가 조치
- 작성하신 모든 컴포넌트, 특히
Layout과App의 코드를 다시 한 번 검토하고, 불필요하게 호출되는 부분이 없는지 살펴보세요.
- 개별 컴포넌트의 콘솔 로그를 활용하여 어떤 시점에서 몇 번 렌더링되는지를 추적하는 것도 유용합니다.
이와 관련된 유사한 문제를 다룬 사이트 전체 Route 구조 짜기 영상 10분쯤 코드가 똑같은데 연결이 안되요 게시글도 참고해 보세요. 코드를 작성하면서 발생할 수 있는 오류를 해결하는데 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
ESFP 영어버전 받을 수 있을까요?
0
81
2
강의 9분 45초 질문입니다
0
88
4
이미지 생성 참조 툴 문의
0
78
2
사이트에 애드센스 연결하는 법
0
128
2
카카오 애드핏 글로벌
0
93
1
db 를 연결하려면 어떤걸 추천하시나요?
0
163
2
GA "수명주기" 탭 없음
0
113
2
cloudflare gitgub private repository 가져올 수 있을까요?
0
241
2
robots.txt 최신화 하는 방법을 아시나요?
0
137
1
메타태그쪽 보고 있습니다만 helmet 라이브러리가 뭔가 잘 작동 안하네요.
0
111
3
CloudFlare 설정 질문
0
377
2
SNS 공유버튼 그룹 만들기 6:30~7:30 질문있습니다.
0
144
3
React Build 문제
0
137
1
PC 접속 X, 모바일 접속만 가능
0
145
2
이미지 리사이징 현상 막기
0
140
1
AWS 배포 후 사이트 접속이 원할하지 않은 문제
0
120
1
따라하다 보니 어느순간 화면이 하얗게 나오는건 왜그럴까요?
0
157
3
이용 약관 코드도 제공을 해 주시나요?
0
126
1
코드 힌트 방법
0
223
2
마지막 강의에서 다음 강의가 있다고 하셨는데 곧 올라오나요?
0
86
2
rem 단위를 쓰는 이유
0
235
2
리액트를 선택한 이유
0
130
2
구글 애드센스의 경우 한 개의 아이디로 여러 사이트에 등록이 가능한 것인지 궁금합니다.
0
221
2
이미지 제작에 관한 문의
0
113
2