[React] SPA, DOM, virtual DOM(가상 돔)

 

 

 

 

 

SPA

 

SPA는 Single Page Application의 줄임말이다.

 

말그대로 "싱글 페이지 어플리케이션" 페이지가 한개의 페이지로 구성되어있다.

 

예전의 웹사이트는 다른 페이지로 이동하면 서버에서 새로운 페이지를 불러와서 새로고침이 됐다면

 

SPA는 첫랜더링때 페이지 전체를 불러오고 페이지를 이동할때는

 

서버로부터 새로운 페이지를 불러오지 않고 내부를 수정해서 보여준다.

 

단점으로는 SEO에 좋지않다.

 

 

 

 

 

 

 

---

  

 

 

 

 

DOM

 

 

 

DOM은 HTML 요소들을 트리형태로 나타낸것이다.

트리 전체를 DOM이라고 하고

 

트리안에 있는 모든 요소 하나 하나들을 Node라과 부른다.

 

그리고 그 요소들은 다 API다.

 

사진에 있는 document가 자바스크립트에서 사용하는 document.~~이다.

 

그래서  querySelector처럼 DOM이 제공하는 API를 통해서 DOM조작을 할 수 있다. 

 

 

 

 

 

 

 

---

 

 

 

virtual DOM( 가상 돔 )

 

 

 

 

 

 

virtual DOM은 가상 돔이다.

 

실제 DOM을 그대로 복사한것이 virtual DOM (가상 돔) 이다.

 

virtual DOM은 DOM처럼 API를 제공하지 않는다.

 

virtual DOM은 DOM처럼 웹사이트에 접근하는게 아니라

 

자바스크립트 객체 형태로 메모리에 저장되어있기 때문에

 

virtual DOM을 생성하고 접근하는것은 아주 가벼운 작업이다,

 

리액트는 항상 2개의 가상돔을 가지고 있다.

 

첫번째는 렌더링 이전의 화면 구조를 나태내는 가상 돔

 

두번째는 랜더링 이후에 보여줄 DOM을 나타내는 가상 돔

 

리액트는 state가 변경될때마다 웹사이트가 재랜더링이 된다.

 

즉 첫번째는 첫렌더링때 생기는 가상 돔

 

두번째는 state가 변경돼서 랜더링이 되기전에 보여줄 가상 돔

 

 그리고 두개의 가상 돔을 비교해서 변경된 요소만 찾아내는것을 diffing이라고 한다.

 

바뀐 요소들만 실제 DOM에 적용시켜주는것을 reconciliation( 재조정 )이라고 한다.

 

결론은 변경된 여러개의 요소들이 있다면 그것을 한번에 DOM에 적용시켜준다