React
이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링합니다.
따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해줍니다.
Virtual DOM 은 어떻게 작동하는가?
DOM
Document Object Model
객체를 통하여 구조화된 문서를 표현하는 방법으로, XML 혹은 HTML로 작성
웹 브라우저는 이 DOM을 활용하여 객체에 Javascript와 CSS를 적용
DOM은 트리 형태로 되어있어서, 특정 node를 찾을 수도 있고 수정 할 수도 있고 제거하거나 원하는 곳에 삽입 할 수도 있다.
DOM의 문제점
동적 UI에 최적화되어 있지 않다.
자바스크립트나 jQuery를 사용하여 동적인 변화를 줄 수 있지만, 큰 규모의 웹 앱에는 수많은 요소들이 있으므로 이렇게 규모가 큰 웹 앱에서 DOM에 직접 접근하여 변화를 주도 보면 성능상의 이슈가 조금씩 생기고 속도가 느려진다.
그 이유는 DOM 때문이 아니다. DOM은 매우 빠르지만 DOM의 변화가 일어날 때, 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고 웹페이지를 repaint하기 때문에 느려지는 것.
해결법
DOM 작업을 가상화하여 미리 처리한 다음에 한꺼번에 적용한다.
Virtual DOM
실제 DOM에 접근하여 조작하는 대신에, 이를 추상화 시킨 Javascript 객체를 구성하여 사용
이는 마치 실제 DOM의 가벼운 사본과 비슷함.
React에서 데이터가 변하여 브라우저 상의 실제 DOM을 업데이트 하는 3 단계
데이터가 업데이트되면, 전체 UI를 Virtual DOM에 리렌더링 한다.
이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.
바뀐 부분만 실제 DOM에 적용.
결국, 컴포넌트가 업데이트 될 때, 레이아웃 계산이 한 번 만 이루어 진다.
오해
Virtual DOM을 사용한다고 해서, 사용하지 않았을 때에 비해 무조건 빠른 것은 아니다.
지속해서 데이터가 변화하는 대규모 애플리케이션 구축을 위해 React를 만들었다 (React 매뉴얼 중)
React와 Virtual DOM은 업데이트 처리에 대한 간결함을 제공
UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소해주고, 업데이트에 더욱 쉽게 접근할 수 있게 해준다.
특징
Virtual DOM을 사용
JSX
Javascript의 확장 문법
DOM 엘리먼트들을 만들 때 Javascript 형식으로 작성해야 하는 것을, XML과 비슷한 형태로 작성할 수 있게 해준다.
권장사항이고 필수는 아니지만 사용하지 않으면 좀 불편하다.
Components
React는 모두 Component에 대한 것이므로 React 개발을 할 때에는 모든 것을 Component로서 생각해야 한다.
장점
Virtual DOM을 사용한 어플리케이션의 성능 향상
클라이언트에서도 렌더링 될 수 있고, 서버측에서도 렌더링 될 수 있음 (이를 통해 브라우저 측의 초기 렌더링 딜레이를 줄이고,SEO 호환도 가능해진다.)
Component의 가독성이 매우 높고 간단하여 쉬운 유지보수가 가능.
Framework가 아닌 Library라서 다른 프레임워크들과 사용이 가능합니다.
React에선 UI만 신경쓰고, 빠져있는 부분은 본인이 좋아하는 라이브러리를 사용하여 stack을 본인의 입맛대로 설정 할 수 있음
제한
앱의 View 레이어만 다루므로 이 외의 부분은 다른 기술을 사용해야 한다.
예를 들어 Ajax, Router 등의 기능은 직접 구현하거나 다른 모듈을 설치하여 사용.
React 버전 v15부터 IE8 이하 버전을 지원하지 않는다.
댓글