[TIL] 벨로퍼트와 함께하는 모던 리액트(1)

리액트가 만들어진 이유

인터렉션이 자주 발생하고 이에따라 동적으로 UI를 표현해야 된다면 규칙이 너무 많아지고 관리도 힘들어진다. DOM을 직접 건드리며 작업하면 코드가 난잡해지기 쉽다.

-> 그래서 나온 Ember, Backbone, AngularJS 등의 프레임워크 작동 방식을 쉽게 설명하자면 특정 js 값이 바뀌면 특정 dom 이 바뀌게 연결, 업데이트(작업 간소화)

 

리액트는 어떤 상태가 바뀔 때 DOM을 업데이트 하는게 아니라 아예 날리고 새로 만들어서 보여주면 어떨까 라는 아이디어로 시작

-> 어떻게 업데이트할지 고민X 하지만 실제로 다 날리고 새로 만들면 속도가 엄청 느려질 것

->> 이걸 가능하게 해주는 Virtual DOM

말그대로 가상 DOM, 브라우저에 실제로 보여지는 게 아닌 메모리에 가상으로 존재하는 돔이다. 그냥 JS 객체라서 성능이 실제로 브라우저에서 돔을 보여주는 것보다 속도가 훨씬 빠르다.

상태 업데이트 > 업데이트 필요한 UI를 virtual DOM으로 렌더링 > 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘으로 실제 브라우저의 돔과 비교 > 차이나는 곳 감지해서 실제 돔에 패치!

어떻게.. 이런 걸 생각해냈을까...