[React] React 원리 & 가상 돔(Virtual DOM)의 정의와 작동원리
📑 개요
사실 그냥 이전 포스팅에서 리액트 설명할 때 가상돔 간단히 쓰면 되겠지~ 했는데
작성하다보니 가상 돔은 이렇게 간단히 끝낼 게 아닌 거 같은데...... 싶어서 이전 포스팅의 보충 포스팅 느낌이다...
가상 DOM 이라는 처음 개념 잡기가 좀 어렵다...
내가 가상 돔을 처음 접한 게 react는 아니고 vue를 배울 때였는데
옆에 앉은 친구랑 이게... 뭔데... 굳이 왜 있어야 하는데...? 하고 강사님께 계속 물어봤었음.
근데 한 번 이런건가...하고 추상적이나마 이해하니 쉽게 잊혀지는 개념은 또 아니다.
그럼 각설하고 가상 돔 알아보러...!😂
나! 는! 즐! 겁! 다!
🌲 DOM (Document Object Model)
- DOM이란?
React의 작동 원리를 알기에 앞서 일단 DOM에 대해 알아보자.
DOM이 무엇인지 알아야 React의 Virtual DOM을 이해할 수 있기 때문이다.
DOM
웹 페이지를 이루는 HTML 요소들이 JavaScript가 이용할 수 있도록 구조화된 표현으로 객체에 해당한다.
HTML 코드가 있다고 가정할 때 우리는 각 태그가 무슨 뜻을 갖고 있는지 알고 있다.
하지만 웹을 그리는 브라우저와 HTML을 동적으로 제어하는 JavaScript에게는 텍스트에 불과하다.
이러한 텍스트를 웹 브라우저와 JavaScript가 이해하기 쉽도록 트리 구조로 파싱하여 만든 객체가 DOM인 것이다.
예시로 우리는 티비를 조작할 때 따로 구조를 모르더라도 리모컨을 통해 편하게 채널을 돌릴 수 있는데,
HTML이 TV이고 DOM이 리모컨이라고 비유할 수 있다.
- DOM의 제어
우리는 JavaScript를 통해 동적 웹페이지를 만들게 된다.
이 때 DOM을 이용하여 동적으로 제어(조작)을 하는데,
이를 JavaScript가 해줄 수 있게 하는 DOM API가 기본적으로 제공된다.
DOM API를 통한 DOM의 조작법
1. DOM에 요소(element)를 추가한다.
2. DOM의 요소(element)를 수정한다.
3. DOM의 요소(element)를 삭제한다.
동적인 웹 페이지를 만들다보면 element를 조작하고, DOM을 변화시키는 수많은 연산이 생긴다.
하지만 DOM은 동적 UI에 최적화되어 있지 않다.
DOM을 통해 웹 브라우저는 객체에 JS와 CSS를 적용하는데
CSS 연산을 다시 하고 페이지를 리페인팅 하는 데에는 많은 시간이 소요된다.
따라서, 웹 브라우저가 DOM를 보고 웹 페이지를 그리는 결과물은 동일하되
변경되는 DOM을 최소한으로 만들기 위한 방법으로 React의 Virtual DOM이 나타난 것이다.
🖨 Virtual DOM
- 가상 돔 (Virtual DOM) 이란?
가상 돔 (Virtual DOM) 은 UI를 더 효율적으로 업데이트 하기 위한 것으로
데이터가 변할 때마다 화면을 새로 띄우지 않고,
가상 DOM에 변화를 먼저 입력한 다음 실제 DOM과 가상 DOM의 비교를 통해 변경된 부분만을 감지하여 업데이트 한다.
이를 통해 성능을 향상시키고 복잡한 UI의 관리를 쉽게 하는 것이다.
본래 Virtual DOM 보다 먼저 기존의 DOM 문제를 해결하려고 나온 jQuery가 있었다.
그러나 규모가 크고 사용자와의 교류가 많은 웹앱이 늘어나며 성능은 더욱 중요시되었고
jQuery는 이 부분에서 한계를 맞이하고 있었다.
이러한 한계를 극복하기 위해 나온 것이 Virtual DOM이다.
Virtual DOM이 나오면서 jQuery와 같이 DOM을 직접 조작하는 것은 legacy 코드 취급을 받게 되었다.
이제 사용자는 Virtual DOM을 조작하고, Virtual DOM이 실제 DOM을 조작해주게 된 것이다.
그리고 이런 조작 과정은 Diffing 알고리즘을 통해 React가 해주게 된다.
- Virtual DOM의 동작 과정
React의 리렌더링이 일어나는 경우
1. Props의 변경
2. State의 변경
3. forceUpdate()의 실행
4. 부모 컴포넌트가 렌더링 됐을 때
React는 상태나 속성이 변하면 리렌더링을 통해 화면에서 보여지는 값을 갱신한다.
이 때, React는 화면이 깜빡이는 일 없이 빠른 속도로 값을 바꾸는데 이 과정의 핵심이 Vitrual DOM이다.
위의 과정을 React의 ReactDOM.render() 함수가 처리한다.
상태나 속성값이 변하면 React는 가상 돔에서 변경된 값을 탐지하여 변경하고,
Virtual DOM과 진짜 DOM을 비교하여 변경된 사항만 진짜 DOM에 반영하여 수정한다.
이러한 방식을 통해 전체 DOM 트리를 다시 구축하지 않아도 필요한 부분만 구축하여 빠른 업데이트가 가능한 것이다.
예시를 통해 렌더링 과정을 더 자세히 알아보자.
function ChangeColor() {
const [color, setColor] = React.useState('red'); // 초기 색상을 'red'로 설정합니다.
// 버튼 클릭 시 색상을 파란색('blue')으로 변경하는 핸들러 함수
function handleChangeColor() {
setColor('blue');
}
return (
<div style={{ color: color }}>
이 텍스트 부분만 색이 바뀌어 렌더 됩니다
<button onClick={handleChangeColor}>Change Color</button> {/* 버튼을 클릭하면 색상을 변경합니다. */}
</div>
);
}
ReactDOM.render(<ChangeColor />, mountNode); // ChangeColor 컴포넌트를 mountNode에 렌더링합니다.
- 초기 렌더링
ChangeColor 컴포넌트가 처음 렌더링 되고 color 의 상태가 초기값인 'red'로 설정된다. - 가상 DOM 생성
가상 DOM에는 <div> 요소와 <button> 요소가 포함되며, style 속성에 현재 color 상태가 적용된다. - 실제 DOM 반영
초기값으로 설정된 'red'가 가상 DOM에서 실제 DOM으로 적용된다. - 버튼 클릭
- 상태 업데이트 및 재렌더링
handleChangeColor 함수가 호출되어 color 상태가 'blue'로 업데이트되고 ChangeColor 컴포넌트가 다시 렌더링 된다. - 재렌더링 된 가상 DOM 생성
새로운 color 상태값에 따라 재렌더링된 가상 DOM이 생성되고 <div> 요소의 style 속성에는 새로운 'blue' 색상이 적용된다. - 실제 DOM 업데이트
재렌더링된 가상 DOM이 실제 DOM에 반영되고 색상이 변경된 내용이 화면에 업데이트 된다.
✨ 마무리
생각보단 짧지만 그래도 내용이 좀 깊어서 정리하는 시간이 길게 느껴졌다...
실제로 길었을지도.................
사실 가상 돔... 그냥 돔의 복제품 하나가 더 있다고 생각하면 되는데...
이게 성능과 이어진 것 뿐..............
다 정리했더니 뭐 주저리주저리 할 기운이.... 😦!
- 요약
- DOM
웹 페이지를 이루는 HTML 요소들이 JavaScript가 이용할 수 있도록 구조화된 표현으로 객체에 해당한다. - Virtual DOM
UI를 더 효율적으로 업데이트 하기 위한 것으로 가상 DOM에 변화를 먼저 입력한 다음 실제 DOM과 가상 DOM의 비교를 통해 변경된 부분만을 감지하여 업데이트 한다. - Virtual DOM을 쓰는 이유
상태나 속성값이 변할 때 전체를 다시 렌더링 하지 않고 변경사항만 렌더링 하면 되므로 기존의 DOM 방식보다 훨씬 빠르게 업데이트가 가능하다.
참고 문헌
https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD