React
- 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리
- 컴포넌트를 이용해서 사용자 인터페이스를 효과적으로 구축
- Props를 이용해서 데이터를 전달하고, State를 이용하여 상태 변화 감지
- React는 단지 컴포넌트화를 하고, 데이터를 전달하고 상태를 관리하는 라이브러리
DOM
- Document Object Model
- HTML, XML 문서의 프로그래밍 interface
- 웹 페이지를 이루는 요소(ex. 태그)를 자바스크립트가 이용할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델
- DOM은 HTML과 JavaScript를 이어줌
가상 DOM
- 실제 DOM에 접근하는 대신, 이를 자바스크립트 객체로 구성해 추상화하여 사용하는 방식
- React가 모든 처리를 대신 해주기 때문에 DOM API를 직접 구현하지 않아도 됨
- 실제 무거운 돔의 가벼운 사본
ReactDOM
- 사용자가 보는 웹 화면은 React DOM을 이용해서 업데이트 진행
- 실제 웹 화면에 렌더링
- 가상 DOM 개념을 사용하여 컴포넌트 트리를 React DOM에게 전달
- 컴포넌트에서 변경 사항이 발생해도 실제 DOM과 가상 DOM 차이가 없다면 반영 X
- 변경 사항이 발생하면 실제 차이가 발생하는 부분만 업데이트
- ex) 기존 페이지 데이터 버전 v1, 바뀐 페이지 데이터 버전 v2라고 할 때,
1. 데이터가 업데이트 되면, v2의 UI 전체를 Virtual DOM에 리렌더링
2. Virtual DOM에 있던 v1과 Virtual DOM의 v2를 비교
3. 비교 후 바뀐 일부분만 실제 DOM에 적용
React Elemeent
- 가상 DOM은 리액트 엘리먼트로 이루어짐
- 브라우저 DOM은 DOM 엘리먼트로 이루어짐
- 리액트 앨리먼트는 그에 대응하는 실제 DOM 엘리먼트가 어떻게 생긴 것인지 기술해 줌
참고
🍄🧑🌾