[React] 탄생

기존 자바스크립트에서는 DOM을 이용해 요소들을 Select해줬었다.

 

DOM이란 무엇일까?

DOM은 각 HTML 엘리먼트의 정보를 지닌고 있는 자바스크립트 객체이다.

그래서 우리는 DOM 덕분에 자바스크립트로 HTML의 엘리먼트들을 변경할 수 있었다.

 

이 HTML의 엘리먼트들에 대한 작업을 위해 여태껏 자바스크립트에서는

DOM을 직접적으로 건드렸었다.

 

그러나 DOM을 직접적으로 건드리는 방식은

코드가 난잡해지고 유지보수가 어려운 코드가 된다.

 

이에 대한 대안으로 Ember, Backbone, AngularJs와 같은 라이브러리들이 나왔고,

해당 라이브러리들은 상태에 따라 DOM을 어떻게 Update할지에 대한 규칙을 정했다.

 

그리고 이에 대한 또 새로운 대안을 제시한 라이브러리가 바로 React이다.

 

리액트는?

JS의 객체인 Virtual DOM 이라는 가상의 돔을 이용해서

Update에 대한 부분을 처리한다.

 

이 가상의 돔은 JS의 객체이기 때문에 실제 DOM보다 처리속도가 훨씬 빠르다.

 

상태가 Update되면 Update가 필요한 UI를 메모리에 있는 Virtual DOM에 랜더링한다.

랜더링을 하고나면, React에서 자체 개발한 비교 알고리즘을 통해

브라우저의 실제 Real DOM과 Virtual DOM을 비교, 차이를 감지해 실제 돔에 패치한다.

 

리액트의 이와 같은 방식은

정말 필요한 변화만 발생시키면서도 빠른 성능이 보장되는 효과를 보게 해주었다.

 

결국, React로 인해서 우리는 UI를 어떻게 업데이트 할지에 대한 고민에서 벗어나

UI를 어떻게 보여줄 지에 대해 제대로 집중 할 수 있게 되었다.