React 개념

작업
React
VirtualDOM
진행 상태
완료
진행일시
2021/11/22
학습자

1. React의 탄생 배경

1.
웹 어플리케이션 규모가 커지면서 DOM을 직접건드려 작업을 하게되면 코드가 번잡스럽게 됨
2.
React는 상태가 바뀔 때 DOM을 업데이트하는게 아니라 기존의 DOM을 날리고 처음부터 새로만들어서 보여준다 라는 발상으로 탄생 됨
3.
이렇게 되면 '업데이트를 어떻게 해야할지' 고민할 필요가 없어서 개발이 쉬워지게 됨
4.
하지만 규모가 큰 어플리케이션을 매번 다 날리고 보여지게 된다면 속도가 굉장히 느리게 됨
5.
이걸 해결하기 위해 Virtual DOM을 사용

2. Virtual DOM 이란?

Virtual DOM 은 가상의 DOM 인데요, 브라우저에 실제로 보여지는 DOM 이 아니라 그냥 메모리에 가상으로 존재하는 DOM 으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링합니다. 그리고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜줍니다. 이를 통하여, "업데이트를 어떻게 할 지" 에 대한 고민을 하지 않으면서, 빠른 성능도 지켜낼 수 있게 되었습니다.