0. React의 등장 배경

이 React 글들은 벨로퍼트님의 '벨로퍼트와 함께하는 모던 리액트'와

벨로퍼트님 책을 참고하여 작성된 것임을 알려드립니다.

---

 

React

 

JavaScript를 이용하여 HTML로 구성한 UI를 제어해보았다면 DOM을 변형시키기 위하여 우리가 어떠한 작업을 해야하는지 익숙할 것입니다. 이 과정에 대해서 말해보자면 DOM 선택자를 사용하여 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정해야 합니다.

 

숙련된 JavaScript 개발자라면 코드를 최대한 깔끔하게 정리하여 쉽게 유지보수 할 수도 있겠지만 대부분의 경우 웹 어플리케이션의 규모가 커지면 DOM을 직접 건드리면서 작업을 하면 코드가 난잡해질 수 있습니다. 

많은 JS 프레임워크들은 특정 값이 바뀌면 특정 DOM 속성이 바뀌도록 연결을 해주어서 업데이트 하는 작업을 간소화해주는 방식으로 발전되어 왔습니다. 하지만 React는 DOM을 어떻게 업데이트 할지 규칙을 정하는 것이 아니라 아예 처음부터 모든걸 새로 만들어서 보여준다는 아이디어에서 시작했습니다.

 

동적인 UI를 보여주기 위해서 모든걸 다 날려버리고 모든걸 새로 만들게 된다면 속도가 굉장히 느릴 것입니다. 작읍 웹애플리게이션이라면 상관 없겠지만 규모가 큰 웹 어플리케이션이라면 상상하기 어렵습니다. 하지만 React에서는 Virtual DOM이라는 것을 사용해서 이를 가능케 했습니다.

 

Virtual DOM은 말 그대로 가상의 DOM입니다. 브라우저에서 실제로 보여지는 DOM이 아니라 그냥 메모리에 가상으로 존재하는 DOM으로 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠릅니다. 리액트는 상태가 업데이트 되면 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링 합니다. 그리고 실제 브라우저에 보여지고 있는 DOM과 비교를 한 후 차이를 감지하여 실제 DOM에 패치시켜줍니다.