리액트에서 사용하는 VirtualDOM에 대해 알아보자

리액트는 직접 DOM에 접근하지 않고 값을 변경해야하는 규칙을 가지고 있습니다.

그렇기 때문에 이런 규칙을 이해해야 올바른 개발을 할 수 있습니다.

 

 

이런 코드를 본 적 있을 것입니다.

document.getElementById('test1').innerHTML = 'Hello!';

위 코드가 의미하는 바는 무엇일까요?

 

간단하게 말하면 DOM에 접근해 값을 바꾸라는 말입니다.

렌더링이 뭐죠? 브라우저에 내용이 써지는 과정 (feat. DOM,Repain,Reflow)

위 글을 꼭 읽고 DOM을 이해한 후 아래내용을 읽어주세요.

 

그렇다면 왜 JavaScript기반 프레임워크인 React에선 저런 코드를 본 적이 없을까요?

그 이유는 React에선 VirtualDom을 사용해 변경된 값을 바로 DOM에 적용하는 것이 아니라 VirtualDOM에서 변경을 마친 후 그 내용을 DOM에 적용하기 때문입니다.

 

 

1. VirtualDOM에서 useState로 인해 변경된 값이 있다는 것을 확인합니다.

2. 변경된 값이 있는 컴포넌트와 그 하위컴포넌트 모두 파악합니다.

3. 그렇게 파악한 컴포넌트들을 모두 VirtualDOM에서 수정한다.

4. VirtualDOM의 계산이 끝나면 DOM에 적용한다.

 

DOM 조작의 실제 문제는 각 조작이 레이아웃 변화, 트리 변화와 렌더링을 일으킨다는겁니다. 예를 들어 30개의 노드를 하나 하나 수정하면, 30번의 (잠재적인) 레이아웃 재계산과 30번의 (잠재적인) 리렌더링을 초래한다는 것이죠.

 

최근 단순히 정보를 보여주기만한 브라우저는 많이 없습니다. 값을 입력하고 그 값에 의해 레이아웃이 변경되는 상호작용하는 브라우저가 많아지고 있습니다.

사용자와 브라우저 사이의 상호작용이 많아질수록 브라우저는 바빠집니다.

때문에 효율적이지 않은 브라우저 렌더링은 사용자경험(UX)를 해칠 우려가 있기 때문에 VirtualDOM을 사용합니다.