실제 DOM을 복사한 게 가상 돔
수정할 element, 그의 하위 element를 찾아서 교체
가상돔은 실제 브라우저 화면에 접근하는게 아니기 때문에 가볍다.
리액트는 2개의 가상돔 객체를 갖고 있다.
1. 렌더링 이전 가상돔
2. 렌더링 이후 가상돔
Diffing: 둘을 비교해서, 어떤 지점이 바뀌었는지 찾아낸다.
Batch Update: 만약 10개의 요소가 바뀌었다면 10번에걸쳐서 바꾸는게 아니라, 변경된 모든 부분을 한번만에 집단으로 바꾼다)
변경된 돔만 수정
Reconsiliation 재조정 과정: Diffing 파악 후, Batch(집단) Update하는 과정
'Front-End > React.js' 카테고리의 다른 글
| 2장 올림픽 통계 서비스 최적화(1/2) [프론트엔드 성능 최적화 가이드] (0) | 2023.06.26 |
|---|---|
| useEffect (0) | 2023.03.28 |
| state 란? 무엇인가 . . .🙄 (0) | 2023.03.22 |
| React.memo 실험 (0) | 2023.03.17 |
| state 관리 대상 줄이기를 고민하다가 => useMemo, useCallback까지 (0) | 2023.03.17 |
