DOM 업데이트 vs 리렌더링

정태수·2024년 12월 19일
post-thumbnail

리렌더링(Rendering):
React는 컴포넌트 상태 변경 시 전체 컴포넌트를 "가상 DOM(Virtual DOM)"에서 다시 계산합니다.
이 과정에서 어떤 부분을 업데이트할지 비교합니다.

API 요청을 react-query를 이용하는데 parameter를 state로 설정해놔서 바뀔때마다 API가 호출되므로 리렌더링 현상이 발생했다.

-> 효과적 API 호출은 가능했으나 화면 깜빡거림이 굉장히 거슬렸다.

DOM 업데이트:
React는 가상 DOM의 변경 사항을 실제 DOM에 반영합니다.
여기서 최소한의 변경만 적용하려고 최적화를 수행합니다.

-> 리렌더링 방지를 위해 API 호출 최소화를 선택함.

profile
프론트엔드 개발자

0개의 댓글