2. React.js

<React.js>

1. 컴포넌트를 기반으로 UI를 표현

2. 화면 업데이트 구현이 쉬움

 

◆ 선언형 프로그래밍 (리액트)

- 과정은 생략하고 목적만 간결히 명시하는 방법

- 업데이트를 위한 복잡한 동작을 직접 정의할 필요 없이

특정 변수의 값을 바꾸는 것만으로도 화면을 업데이트 시킬 수 있음

 

◆  명령형 프로그래밍 (JS)

목적을 이루기 위한 모든 일련의 과정을 설명하는 방식

 

3. 화면 업데이트가 빠르게 처리됨

 

1. HTML과 CSS를 각각 DOM(요소들의 위치, 배치, 모양에 관한 모든 정보)과

    DSSOM(요소들의 스타일과 관련된 모든 정보)으로 변환

2. 이 둘을 합쳐서 Render Tree(웹페이지의 청사진/설계도)를 만듦 

3. Layout(요소의 배치를 잡는 작업)을 수행

4. Paingting(실제로 화면에 그려내는 과정)을 거치면 웹페이지가 실제로 눈에 보이게 됨 

 

 

DOM(문서객체모델): html 모델을 일종의 객체 모델로 변환한 것

 

[업데이트]

 

dom이 수정되면 dom은 Ciritical Rendering Path 전체 단계를 다시 진행함

  

Layout, Painting은 매우 오래 걸리는 과정이기 때문에  js를 3000번 수정하면

전체 과정을 3000번 진행하게 되고 성능이 매우 떨어지게 됨

React는 업데이트를 모아서 한 번에 수정하기 때문에 빠르게 수정이 가능

 

< Virtual DOM >

● DOM을 JS로 흉내낸 것 (일종의 복제판)

● React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 복제판 DOM에 먼저 반영함

가상의 돔을 만들고

업데이트가 발생하면 가상의 돔을 수정한 뒤

업데이트가 다 모이면 한 번에 반영함