리액트는 왜 만들어 졌는가?

js(ts)로 개발을 해보았다면 event 핸들링에 익숙 할 것이다.
작은 프로젝트에서 몇개안되는 이벤트 컨트롤을 할 땐 상관없지만
프로젝트가 커지고 좀 더 복잡한 이벤트를 컨트롤 하고 상태를 업데이트 할 때
그만큼 접근하는 dom도 복잡해지고 상태관리도 복잡해지는 법이다.

과장하면 요런식...

그래서, Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌었는데
JS에서 특정값이 바뀌면 DOM의 속성이 바뀌도록 연결 해주어, 업데이트 하는 작업을 간소화 해주었지만 업데이트를 하는 방식은 또 따로 지정해주어야 하기 때문에 각각의 복잡도가 완전히 해결되는 느낌은 아니였다.

리액트는 그래서 "DOM을 어떻게 업데이트할까?"가 아닌 "업데이트가 있을때마다 다 날리고 새로 만들어 보여주자!"라는 발상에서 시작한 프레임워크이다.

때문에 업데이트가 있을때 업데이트 방식을 생각하지 않아도되어 정말 편하지만
업데이트가 있을때 마다 새로 그려준다면 성능이슈를 생각하지 않을 수가없다.

이벤트가 있을때마다 페이지가 새로고침 된다고 가정해보자

그래서 리액트는 Virtual DOM이라는 것을 사용해 성능이슈를 해결하였다.

Virtual DOM은 말그대로 가상의 DOM인데 화면상에 보여주는 실제 dom과 다르게 메모리상에 가상으로 존재하는 dom입니다. 나중에 이 dom을 뜯어보면 js객체로 만들어져 있다는 것을 알 수 있는데, 때문에 실제 dom보다 매우 빠르게 상태 업데이트(값 수정)이 이루어진다.
이렇게 리액트는 성능과 개발의 편의성을 둘 다 잡아 웹 개발에 핵심 프레임워크가 되었다.