728x90
React의 가장 큰 특징은 Virtual DOM이다.
1. DOM(Document Object Model)
- 객체로 문서 구조를 표현하는 방법으로 XML or HTML로 작성
- 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용
- DOM = 트리 형태. 특정 노드 찾기, 수정, 제거, 삽입 가능
- 많은 플랫폼과 웹 브라우저에서 DOM API 사용
2. DOM의 단점 = 느림
- 동적 UI에 최적화되어 있지 않음
- HTML은 자체적으로 정적이지만 자바스크립트를 사용하여 동적으로 만들 수 있음
- DOM 자체는 빠름.
- DOM 자체를 읽고 쓸 때의 성능 = 자바스크립트 객체를 처리할 때의 성능
- 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산, 레이아웃 구성, 페이지 리페인트를 수행. 이 과정에서 시간이 허비됨.
3. DOM 단점 해결법
- Virtual DOM방식 사용 - DOM 처리 횟수 최소화, 효율적으로 진행
4. Virtual DOM
- 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용(실제 DOM의 가벼운 사본과 유사)
5. 웹 브라우저에 실제 DOM을 업데이트할 때의 절차
- 데이터를 업데이트시 전체 UI를 Virtual DOM에 리렌더링
- 이전 Virtual DOM에 있던 내용과 현재 내용 비교
- 바뀐 부분만 실제 DOM에 적용
6. 라우팅
- 다른 개발자들이 만든 라이브러리
- 리액트는 뷰만 신경 쓰는 라이브러리이므로 기타 기능은 직접 구현하여 사용해야 함
- Ajax 처리 - axios or fetch
- 상태 관리 - 리덕스 or MobX
- 취향대로 스택을 설정할 수 있다는 장점이 있지만, 여러 라이브러리를 접해야 한다는 단점도 존재
- Backbone.js, AngularJS 등의 프레임워크나 라이브러리와 혼용 가능