Virtual DOM
2022. 6. 26. 12:52ㆍReact
Virtual DOM
Why Virtual DOM?
요즘은 SPA (Single Page App) 이 트렌드로 자리 잡고 있다.
SPA는 전체 페이지를 서버에서 매번 보내주는 것 이 아니라
브라우저에서 자바스크립트가 관리하기 때문에 DOM 조작을 효율적으로 할 수 있게 최적화가 필요해졌다. 그래서 기존 DOM을 직접 조작하면 브라우저가 렌더링을 자주하게 되고, 그 만큼 PC자원을 많이 소모하게 된다.
Virtual DOM 은 DOM의 복사본 또는 DOM의 추상화라고 표현한다.
기존 DOM과 같은 속성을 가지고 있지만 API는 가지고 있지 않으며
데이터가 변경되면 전체 UI는 Virtual DOM 에 렌더링이 된다.
그리고 바뀐 부분만 실제 DOM에 반영이 된다.
Virtual DOM은 자바스크립트 객체를 활용한다.
기존 DOM이 아닌 메모리 상에서 동작하기 때문에 훨씬 빠르게 동작한다.
필요한 부분만 변경 해주기 때문에 연산 비용을 최적화 시킬 수 있다.
무조건 Virtual DOM ?!
어떻게 보면 Virtual DOM 도 하나의 과정을 거쳐서 나오는 것이다.
정보제공만 하는 웹 페이지라면 인터렉션이 발생하지 않기 떄문에
일반 DOM의 성능이 더 좋을수도있다.
'React' 카테고리의 다른 글
| [React] 새로운 훅을 미리 학습하기 "use" (16) | 2023.10.26 |
|---|---|
| useHistory (react-router-dom@5) (0) | 2023.04.24 |
| useMemo (컴포넌트 최적화) (0) | 2022.06.01 |
| useState (상태) (0) | 2022.05.22 |