리액트는
state의 변경에따라서,props의 변경에따라서,부모 컴포넌트에 변경에 따라서리렌더링이된다.
리렌더링이 될 때 리액트는 실제DOM에 바로 반영하여 렌더링 하는 것이 아닌가상DOM에 저장한 후 실제DOM에⭐일괄로 반영⭐한 후 렌더링을 하는 프로세스를 가지고 있다.
Virtual DOM이 없는 리액트
자바스크립트에서 DOM API를 사용했던 것 처럼 createElement()처럼 노드 하나하나에 접근하는 것이 문제가 되는 것은 아니지만 변경사항이 생길 때마다
리소스가 비효율적으로 사용될 수 밖에 없기 때문에Virtual DOM이라는 개념을 사용하게 된 것이다.
DOM
우리가 보고있는 웹 페이지는 Document(html문서) Object(객체)로 이루어져있다. 이는 DOM요소인 노드들이 트리형태로 엮여있는 것을 화면에 렌더링 해주기 위한 Model을 의미한다.
⭐각각의 노드는 해당 노드에 접근과 제어를 할 수 있는 API를 제공한다.
예시
// test라는 id를 가진 태그(노드)를 찾아 element에 저장해줘~
const element = document.querySelector("#test")Virtual DOM
말 그대로
가상DOM이다.
가상DOM을 이용해서 실제DOM을 변경하는 작업을 상당히 효율적으로 수행한다.
가상DOM과 실제DOM은 거의 동일하게 생겼다. 실제DOM을 복사한 형태라고 이해하면 된다.
가상DOM은 메모리에 객체형태로 저장되기 때문에 객체만 수정하기에 매우 빠르게 조작할 수 있다.
위에서 보았듯이 실제DOM으로 조작하는 것은 리소스가 많이 든다.
장점
- 자체적으로 효율적인 알고리즘을 사용해서 화면에 렌더링해주기 때문에 속도가 매우 빠르다.
- 리소스를 절약할 수 있다.
Virtual DOM 조작 과정
1. 2가지 가상DOM을 가지고 있다.
- 화면이 변하기 전 가상DOM 객체
- 화면이 변한 후 보여야 할 가상DOM 객체 > state의 변경사항을 근거로 생성된다.
- 두 가지가 생성되는 사이에는 state가 변경된다.
2. diffing (차이점 비교)
- state가 변경되면서 변경 전 가상DOM과 변경 후 보여야 할 가상DOM의 변경된 부분을 빠르게 파악한다.
3. reconciliation (재조정)
- 변경이 일어난 부분만
일괄적으로 실제DOM에 적용시킨다.
4. Batch Update
- 변경사항을
일괄적으로 반영 하는 방법을 의미한다.
5. 브라우저 렌더링
- 위 과정을 모두 거치면 브라우저 렌더링 엔진에 의해 화면에 렌더링이 된다!!
- 스타일 계산, 레이아웃, 페인팅 과정을 거친다.
하루를 마치며
오늘은 바쁜 하루였다. 오전부터 오후까지는 부모님과 설날 대비 장을 보러 갔다가 갤럭시s25 사전예약을 하고 오느라 시간을 많이 소모했다. 그래서 오후6시부터 계속 공부를 했다. 개인 과제때 미흡했던 부분을 해설영상을 보며 연습했다. 해설 영상을 찍어주신 튜터님이 굉장이 설명을 잘해주셔서 좋았다. 하지만 아직도 많이 부족하기 때문에 내일도 복습할 것이다. 다음주 부터 리액트 숙련 주차가 진행되는데 주어진 강의도 들어야한다. 내일은 복습을 충분히 하고 강의를 들어야한다.
