기술면접 준비 중 가장 기초적이면서도 중요한 내용들이 머릿속에서 잊혀져가는 것을 느껴
다시한번 정리하게 되었다.
Virtual DOM 이란?
실제 DOM에 접근하여 조작하는게 아닌, 추상화한 자바스크립트 객체를 구성하여 사용
실제 DOM의 가벼운 사본!
가상 DOM은 DOM의 상태를 메모리 위에 올려두고, DOM에 변경이 있을 경우 해당 변경된 내용만
반영함.
변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영하니 성능 향상
리액트가 Virtual Dom을 반영하는 절차
ex) 특정 부분에서 데이터가 변했다고 가정.
- 리액트를 이용해 돔을 업데이트 시키는 절차
- 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함.
- 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함(가상 돔끼리 비교)
- 바뀐 부분만 실제 DOM에 적용됨.
출처: https://dev-cini.tistory.com/11
📌 Why React?
정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지로. 단순한 소개 페이지 같은 경우는 유저의 인터렉션은 중요하지 않기에 HTML과 CSS만으로도 구현이 가능했다.
하지만 동적 페이지는 유저의 행동과 흐름에 따라 페이지 구성을 달리해야함.
정적페이지는 이미 저장 되어 있는 HTML 문서만 받으면 되지만 동적 페이지는 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 전달받게 됨.
동적 페이지들의 규모가 커지면서 유저의 인터렉션이 전달되면 그만큼 DOM요소들이 변화를 가져야 하고 이러한 과정이 반복되면 브라우저는 많은 연산이 필요하게 된다.
React의 장점
- 가상 돔(Virtual DOM)의 존재
- React Native의 앱 개발 기능
- 수 많은 커뮤니티
- Component를 사용하여 재사용이 가능하고 유지보수의 용이함
-
Virtual DOM의 존재
리액트의 가장 큰 특징 중 하나로 React에서 컴포넌트 단위의 개발이 가능하게 됨.
-
수많은 커뮤니티
Vue에 비해 사용자가 많고, facebook에서 만들어 계속되는 업데이트와 자료가 굉장히 방대함.
-
component 단위 작성
컴포넌트는 UI를 구성하는 개별적인 뷰 단위로 서로서, UI 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 됨. 이러한 블록을 조립해 하나의 완성품을 만듬.
컴포넌트를 나눌수 있기에 다른 부분, 다른 웹에서 재사용이 가능, 이는 생산성과 유지 보수를 용이하게 해준다.
