결, 꼬재랑 함께하는 레벨2 방학 스터디
React란?
React는 SPA 웹 프레임워크로 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 즉, 사용자와 상호작용할 수 있는 동적인 애플리케이션을 개발 할 수 있는 JavaScript 라이브러리이다.
이러한 React는 다음과 같은 특징을 가지고 있다.
- 가상 돔(Virtual DOM)
- JSX
- 단방향 데이터 바인딩
- 선언형 프로그래밍
- 컴포넌트 기반
특징들 중에서 Virtual DOM에 알아 보려고 한다.
Virtual DOM
(Virtual Document Object Model)
- DOM은 HTML, XML, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리하고 브라우저에서 보이는 화면을 DOM트리를 반영해 그리게 된다.
- JavaScript는 DOM을 직접 조작할 수 있는데 매번 조작 할 때마다 DOM 트리를 만들어 화면에 보여준다.
- 조작 할 때마다 계속 DOM 트리를 만들어 화면에 보여주기 때문에 많은 비용이 드는데, 실제 바뀐 부분만 화면에 업데이트를 하기 위해 Virtual DOM이 생겨나게 되었다.
- Virtual DOM은 실제 DOM과 비교하여 변경사항만 실제 DOM에 반영하여 매번 DOM 트리를 만드는 비용을 줄여 앱의 효율성을 개선하게 된다.
가상 돔(Virtual DOM)과 실제 DOM의 차이를 어떻게 알까?(변경된 부분을 어떻게 알까?)
Virtual DOM과 실제 DOM의 차이는 Tree Diff Algorithm을 통해 계산하여 변경된 부분을 찾아 반영하게 된다.
Tree Diff Algorithm로 변경된 부분을 찾는다고 했지만, 좀 더 나아가서 React에서는 어떤 방식으로 변경된 부분을 찾을까?
바로 key 속성을 가지고 해당 이전 dom과 변경될 dom을 비교 할 수 있다.
key 속성은 다음에 좀더 자세히 알아보도록 하겠습니다.
[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 - 왜 Virtual DOM 인가?
'React.js' 카테고리의 다른 글
[React] State의 모든 것(feat.batch) (2) | 2022.06.15 |
---|---|
[React] Key (0) | 2022.06.15 |
[React] JSX (0) | 2022.06.15 |
[React] ReactDOM.createRoot는 뭘까? (0) | 2022.04.26 |
[ReactJS]리액트 react-router-dom / HashRouter, BrowserRouter, Route, Switch, Link (0) | 2021.02.10 |