React를 사용하는 이유 : virtual DOM

frontEnd/React

kim_genius_ 2023. 11. 3. 15:59

DOM에 대해서 문서를 객체화 시키는 모델이다. 우리가 html로 구조를 만들고 웹에서 표현할 때 사용된다.

이정도로만 알고 있었다.

그러던 중 react를 왜들 이렇게 쓸까? 회사에서 왜 이렇게 React 3000 만큼 사랑해! 하는지 궁금해졌다.

그래서 찾아보던 중 "react는 virtual DOM을 사용한다." 는 내용을 봤을 때

내가 DOM에 대한 정확한 개념이 없다는 것을 알게되어 이번 글을 작성하게 되었다.

DOM은 웹 페이지를 컴퓨터가 이해할 수 있는 구조로 변환하여 사용자와 상호 작용할 수 있게 해 주는 것

1) 웹 페이지는 HTML로 만들어짐.

2) HTML은 웹 브라우저에서 렌더링되어 사용자에게 보여짐 => 웹 페이지

3) DOM은 이 HTML 페이지를 컴퓨터가 이해할 수 있는 객체 구조로 변환

4) 이 객체 구조는 각 HTML 요소(예: 제목, 단락, 이미지)를 나타내고, 이러한 요소들 간의 관계와 속성을 표현

5) JavaScript와 같은 프로그래밍 언어를 사용하여 웹 페이지를 동적으로 조작하고 업데이트할 수 있음.

Virtual DOM(가상 DOM)은 React에서 사용하는 개념으로, 실제 DOM(문서 객체 모델)의 가벼운 복사본이다.

React 컴포넌트의 상태 및 데이터를 나타내며 UI 업데이트를 미리 계산하는 데 사용됨.

크게 4가지 과정으로 나눠본다.

◎ virtual DOM 생성

실제 DOM을 복사한 후에 웹 페이지의 전체 구조 및 내용을 표현한다.

◎ virtual DOM 비교

이전 virtual DOM과 현재 virtual DOM을 비교하여 어떤 부분이 변경되었는지 식별한다.

◎ 차이점 식별

React는 DOM 간의 차이를 식별하고, 어떤 부분이 추가, 변경 또는 삭제되었는지를 파악한다. 이것이 React가 어떤 업데이트가 필요한지 결정하는 단계.

◎ 실제 DOM 업데이트

React는 차이점을 식별하면 이제 그 차이점만을 실제 DOM에 반영한다. 이것은 불필요한 DOM 조작을 방지하고 성능을 향상시킴.

만약 롯데*트에 사과 하나를 사러 간다고 해보자.

나혼자 다녀오는게 빠를까? 할머니/할아버지/부모님/울집 똑순이가 같이 다녀오는게 빠를까?

전자가 빠른게 자명하다.

마찬가지로 React에서는 virtual DOM을 만듦으로써 실제 DOM과 비교하여

수정된 부분, 삭제된 부분 업데이트가 필요한 부분만을 재 랜더링 한다.

예를들어, 인스타그램을 보면 왼쪽 navBar은 항상 고정이고 오른쪽 사진만 바뀐다.

그런데 매번 사진이 바뀔 때마다 navBar도 같이 재랜더링되면 성능이 저하된다.

따라서 react의 virtual DOM으로 변화된 컴포넌트만 재 랜더링 시켜줄 수 있다!

React의 virtual DOM은 내가 원하는 컴포넌트만 재랜더링하여 웹 성능을 최적화시켜준다.

실제 DOM에 접근하기 어려워(불가능하진 않음.지양할뿐) 복잡하지만 많이 쓰는 라이브러리이니

잘 배워두자