React reactDOM

React

일반적인 다른 프레임워크처럼 js의 특정 값이 바뀌면 특정 DOM속성이 바뀌도록 연결해서 업데이트하는 간소화하는 방식과는 다르게,

어떤 상태가 바뀔 때 전부 날려버리고 처음부터 모두 새로 만들어 보여주며 업데이트를 어떻게 하는지에 고민을 하지 않고 쉬운개발이 가능하다.

그러나, 동적 ui를 위해 전부 새로 만들면 그 속도가 느려지게 되는데, 이 부분을 react에서는 Virtual DOM이라는 것을 통해서 가능하게 했다.

Virtual DOM

브라우저에 실제 보여지는 Dom이 아닌 메모리에 가상으로 존재하는 dom으로 js 객체 이기 때문에 작동 성능이 실제 브라우저에서 보여주는것 보다 더 빠르다.

상태가 업데이트 되면, ui를 virtualDom을 통해 렌더링한다. 리액트의 알고리즘을 통해 실제 브라우저에 보여지는 dom과 비교후 차이가 있은 곳을 감지해 이를 실제 dom에 패치한다.