Virtual DOM과 Real DOM의 차이를 설명해주세요.
Real DOM은 실제 웹 페이지의 구조와 콘텐츠를 나타내는 것이다. 웹 페이지가 로드 되면 브라우저는 해당 페이지의 구조를 분석하여 트리 형태로 만든다. 이 트리는 노드(Node)로 구성되어 있으며, 각 노드는 HTML 요소를 나타낸다. 자바스크립트를 사용하여 DOM을 직접 조작할 수 있으며 웹 페이지에 새로운 요소를 추가하거나 기존 요소를 제거하려면 직접 DOM 조작 함수를 호출해야 한다. 하지만 이처럼 실제 DOM을 직접 조작하면 웹 페이지의 구조가 변경되기 때문에 성능 문제가 발생할 수 있다. 특히, 많은 요소가 자주 업데이트 되는 경우 브라우저 리플로우(reflow)와 리페인트(repaint)가 발생하여 화면이 지연되거나 깜박이는 현상이 발생할 수 있다.
Virtual DOM은 Real DOM의 가벼운 복제본으로 메모리 상에 존재한다. Virtual DOM은 Real DOM과 동기화되는 방식으로 동작하며, 업데이트가 필요한 경우에만 Real DOM에 변경 사항을 반영한다. 변경 사항이 Real DOM에 적용되면 브라우저가 리플로우와 리페인트를 수행하고 UI가 업데이트 된다. React는 Virtual DOM을 이용하여 이전 Virtual DOM과 현재 Virtual DOM을 비교하고, Real DOM에 필요한 최소한의 변경 사항을 계산하여 적용한다. 따라서 브라우저 리플로우와 리페인트를 최소화하기 때문에 성능 개선에 효과적이며, 복잡한 UI 업데이트를 더 간단하게 처리할 수 있어 개발자가 코드를 더 직관적으로 작성할 수 있다.
