[React] What is React?

자바스크립트에서는 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택하고 특정 이벤트가 발생하면 변화를 주도록 설정을 해야 한다. 만약 사용자와의 상호작용이 잦아지고 이를 동적으로 화면에 표현을 하려면 규칙이 다양해지고 복잡해질 것이다. 그렇게 된다면 유지보수도 어려워질 것이고 애플리케이션의 규모가 크다면 DOM을 직접 건드리면서 작업을 하면 코드가 난잡해질 수 있다.

 

처리해야 할 이벤트, 관리해야할 상태값, DOM 도 다양해진다면 업데이트를 하는 규칙도 많이 복잡해지기 때문에 

 

그래서 생겨난 프레임워크들은 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트하는 작업을 간소화해 주는 방식으로 웹개발의 어려움을 해결했다.

 

하지만 리액트는 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는게 아니라, 아예 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여준다면 어떨까?라는 아이디어에서 개발이 시작되었다.

 

그러면 어떻게 업데이트 해야할지에대한 생각을 하지 않아도 되기 때문에 개발이 쉬워질 것이다. 하지만 모든 걸 날려버리고 새로 만들어서 보여준다면 속도를 걱정하게 된다. 큰 규모의 애플리케이션을 생각해 봤을 때 UI를 통째로 날려버리고 새로 만든다는 상상은 할 수도 없다.

 

리액트에서는 가상돔이라는것을 사용해서 이를 가능하게 했다.

 

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