Virtual DOM
React가 화면을 업데이트 하는 과정을 효율적으로 수행하기 위한 기술
식당에서 고객의 요청
고객 : 저희 물 좀 주세요!
(직원이 주방에서 물을 가져온다)
고객 : 저희 단무지 좀 주세요!
(직원이 주방에서 단무지를 가져온다)
고객 : 저희 물티슈 좀 주세요!
(직원이 주방에서 물티슈를 가져온다 그리고 슬슬 짜증이 난다)
직원 : 아까 물 달라고 할 때 단무지랑 물티슈도 같이 달라하면 되지!!(속마음)
📍필요한 목록을 한 번에 알았다면 주방에 한 번만 갔다왔으면 됐는데, 세번이나 말하는 바람에 주방에 세번이나 왔다갔다 했다.
이는 비효율적이다.
식당에 Virtual DOM이 있었다면
-
Virtual DOM은 고객이 필요로하는 목록을 한 번에 계산한다.
-
그리고 직원에게 물, 단무지, 물티슈가 필요하다고 한 번에 정리해서 전달한다.
-
주방에 단 한번만 가서 필요한 물건을 가져올 수 있다.
실제 React에서 Virtual DOM
수 많은 DOM 조작 ➡ Layout ➡ Paint
-
브라우저 화면에 변화를 주기 위해서는 DOM의 조작이 필요하다
-
브라우저는 DOM에 조작이 발생할 때마다 화면의 배치를 잡는 과정인 Layout과 화면에 색을 칠하는 과정인 Paint를 거친다.
-
React가 화면A에서 화면B로 바꾸는 과정에서 여러번, 여러개의 DOM의 조작을 필요로 할 수 있다.
-
매번 DOM을 계속 건들이게 된다면, 조작이 발생할 때마다 매번 배치를 잡고 색을 칠하는 과정을 반복하게 된다.
-
이는 비효율적이다.
따라서 React는 실제 DOM이 아닌 가상의 DOM을 만들어서 유지한다.
- 화면이 바꿔야하는 상황이 오면 화면을 바꾸기 위해서 필요한 DOM의 조작을 virtual DOM을 통해서 계산한다.
- 실제 브라우저에 있는 DOM에는 한번의 변경만 발생시키는 것
- 이렇게 되면 요소들을 다시 배치하고 색을 칠하는 과정을 한 번만 수행하면 되기에 효율적이다.
정리
React는 실제 DOM을 매번 조작하는 것은 매우 비효율적이기에 virtual DOM이라는 가상의 DOM을 만들어 유지하며 화면에 변화가 필요할 때마다 virtual DOM에서 미리 필요한 부분을 모두 계산하고 실제 DOM에는 한 번의 수정을 가하는 식으로 최적화를 구현한다.
