0126

[STEP 1]

이 과정에서 리액트는 항상 2가지 버전의 가상DOM을 가지고 있어요.

1. 화면이 갱신되기 전 구조가 담겨있는 가상DOM 객체
2. 화면 갱신 후 보여야 할 가상 DOM 객체

리액트는 state가 변경돼야만 리렌더링이 되죠. 그 때, 바로 2번에 해당되는 가상 DOM을 만드는거죠.

[STEP 2 : diffing]

state가 변경되면 2번에서 생성된 가상돔과 1번에서 이미 갖고있었던 가상돔을 비교해서 어느 부분(엘리먼트)에서 변화가 일어났는지를 상당히 빠르게 파악해내요.

[STEP 3 : 재조정(reconciliation)]

파악이 다 끝나면, 변경이 일어난 그 부분만 실제 DOM에 적용시켜줘요. 적용시킬 때는, 한건 한건 적용시키는 것이 아니라, 변경사항을 모두 모아 한 번만 적용을 시켜요(Batch Update 🔥)

• (3) Batch Update

  우리는 앞서, useState 시간에 리액트가 state를 batch 방법으로 update 한다는 것을 배웠어요. 변경된 모든 엘리먼트를 한꺼번에 반영할 수 있는 방법이기도 하죠!

  <클릭 한 번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면>

• 실제 DOM : 5번의 화면 갱신 필요

• 가상 DOM : Batch Update로 인해 단 한번만 갱신 필요

주말에 더 더 쓸게요...