[Frontend 기술면접 top30] 4. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.

Carrie·2023년 8월 1일
0
post-custom-banner

🧑‍💼 면접 답변 정리

"리얼 돔"은 웹페이지의 전체 구조를 나타냅니다. 예를 들어 버튼을 클릭했을 때, 그 버튼의 색상을 바꾸고 싶다면 이얼 돔만을 사용한다면 그 버튼의 색상을 변경하기 위해 전체 웹페이지를 다시 그려야 합니다. 이러한 방식은 꽤 많은 계산과 자원을 필요로 하며 특히 대규모 애플리케이션에서는 성능 문제를 야기할 수 있습니다.
이 문제를 해결하기 위해 "버츄얼 돔"이라는 개념이 도입되었습니다. 버츄얼 돔은 메모리 상에 존재하는 웹페이지의 가상의 구조입니다. 리액트에서는 사용자의 상호작용에 따른 변화를 먼저 이 가상의 돔에 적용합니다. 그 후 실제 변경이 필요한 부분만을 찾아 그 부분만 리얼 돔에 반영합니다. 이 과정을 "Diffing"이라고 부릅니다. 즉, 버튼의 색상만 바뀌었다면 버츄얼 돔은 그 변화를 감지하고, 리얼 돔에서는 해당 버튼의 색상을 바꾸게 됩니다.

profile
Markup Developer🧑‍💻

0개의 댓글