인프런 커뮤니티 질문&답변
작성한 질문수
HTML 태그와 리렌더링 관계
해결된 질문
작성
·
55
0
강사님 안녕하세요!
리액트 강의 완강 후, 리액트로 개인 프로젝트를 진행하던 중에 리렌더링 관련하여 궁금한 점이 생겨 질문드립니다.
컴포넌트가 리렌더링 되는 조건이
1. 부모 컴포넌트가 리렌더링 될 때 (props 포함)
2. 컴포넌트의 state가 변경되었을 때
이렇게 2가지라고 봤는데요!
문제상황 : Input의 state가 변경되면 Button이 재렌더링됨
부모-자식 관계가 아닌 형제관계인 <Input /> 컴포넌트와 <Button /> 가 서로 재렌더링을 유발하는 원인이 무엇일까 해서 질문드립니다.
실제 브라우저DOM에 커밋되지는 않고 각 컴포넌트 내부에서 console을 찍어봐도 나오지 않는 것을 보아하니 렌더링까지만 되는 것 같아요... (chrome react확장 프로그램에서 highlight됨)
제가 여러가지 케이스로 테스트 해 본 결과, (각 컴포넌트는 props도 받지 않고 내부 state만 있음)
div 태그로 감싸져 있을 때 서로 재렌더링을 유발하는 것 같아 아무리봐도 이상해서요 ㅠㅠ
문제 발생코드
<div>
<Input />
</div>
<div>
<Button />
</div>수정한 코드
<Input />
<Button />답변 2
1
안녕하세요 이정환입니다.
아..! 요 문제 저도 최근에 알게 되었는데요 React DevTools의 잘못된 동작으로 보입니다. 실제로는 리렌더링 되지 않는게 맞습니다!
0
안녕하세요, 인프런 AI 인턴입니다. 기매리미님께서 겪고 계신 리렌더링 문제에 대해 설명드리겠습니다.
리액트에서 컴포넌트가 리렌더링 되는 조건은 주로 다음과 같은 경우입니다:
- 부모 컴포넌트의 리렌더링: 부모 컴포넌트가 리렌더링되면 해당 부모의 자식 컴포넌트들도 리렌더링될 수 있습니다.
- 컴포넌트의 State 변경: 컴포넌트 자신의
state가 변할 때 리렌더링이 발생합니다.
- Props 변화: 부모로부터 받은
props가 변경될 때 리렌더링이 발생합니다.
기매리미님이 언급하신 문제 상황에서는 특히 형제 컴포넌트 간의 리렌더링 현상이 발생하는 것처럼 보입니다. 이는 리액트의 최상위 wrapper(div 같은) 요소 사용에 의해 영향을 받을 수 있습니다. 여기에서 주의 깊게 봐야 하는 부분은 DOM의 재구성이 일어나는지 여부가 아니라 가상DOM이 새로 생성되며 비교가 수행되는 빈도입니다.
형제 컴포넌트에서 발생 가능한 문제와 해결책
Virtual DOM과 재생성: 형제 컴포넌트가 같은 부모 내에 존재할 때, 부모가 리렌더링되는 경우 형제 컴포넌트가 가상DOM에서 새롭게 계산됩니다. 다만, 실제 DOM에서는 변화가 없을 수 있습니다. 리액트 DevTools에서 highlight 되었다는 점을 보면 가상DOM에서는 변화가 감지된 것임을 알 수 있습니다.
React.memo 사용: 형제 컴포넌트 간 불필요한 리렌더링을 방지하려면
React.memo를 사용하여 컴포넌트를 메모이제이션할 수 있습니다.
”`javascript
import React, { memo } from ‘react’;
const MemoizedInput = memo(Input);
const MemoizedButton = memo(Button);
// 사용
“`
- 다른 라이프사이클 훅 확인:
useEffect와 같이 특정 상태의 변경에 반응하는 훅이 예상치 못한 리렌더링을 유발하고 있는지 확인하세요.
관련된 질문 및 답변
이와 유사한 리렌더링 문제에 대한 토론과 해결책을 담은 자료를 아래에서 확인하실 수 있습니다:
Checkbox를 누르는데 왜 Editor가 리렌더링되나요?
- 설명: 이렇게 자주 리렌더링되는 현상에 대한 질문으로, React의 훅 사용과 상태 변화에 대한 깊이 있는 토론이 이루어집니다.
- 설명: 이렇게 자주 리렌더링되는 현상에 대한 질문으로, React의 훅 사용과 상태 변화에 대한 깊이 있는 토론이 이루어집니다.
-
- 설명: React.StrictMode에서 발생하는 비슷한 컴포넌트 리렌더링 문제에 대한 해결책과 상세한 분석이 포함되어 있습니다.
- 설명: React.StrictMode에서 발생하는 비슷한 컴포넌트 리렌더링 문제에 대한 해결책과 상세한 분석이 포함되어 있습니다.
위 링크들을 통해 형제 컴포넌트 간 리렌더링 문제를 심도 있게 해결하세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
ㅠㅠㅠ 그렇군요... 최적화 시키고 싶어서 이 문제 때문에 엄청 고생했는데... 실제로는 리렌더링 되지 않는게 맞는다니 다행이네요 ㅠㅠ 답변해주셔서 감사합니다!