Cs

28. Node Js - React JS(리액트 특징)

ITSEONG 2022. 6. 21. 17:55

1. React JS - Facebook에서 만들어진 라이브러리다.

2. 리액트 특징 Components : module과 같이 재사용성이 좋다.

3. Virtual DOM 이란?

  Real DOM Virtual DOM
상황 1. 10개의 리스트가 있다.
2. 그중에 한가지의 리스트만 update됨
3. 전체리스트를 다시 Reload해야됨!
4. 비효율적이다.
1. 10개의 리스트가 있다.
2. 그중 한가지의 리스트만 update됨
3. 그 바뀐 한가지만 DOM에서 바꿔준다.

Virtual DOM 은 Real DOM과 같은 특성을 갖고 있다. 쉽게 생각해 Virtual DOM은 REAL DOM의 복사본이라 생각하면 된다.

 

Virtual DOM 은 어떻게 한가지만 바꿔줄 수 있을까?

0. Virtual DOM은 이전상태와의 비교를 위해 항상 이전 상태의 Virtual DOM의 사본을 유지합니다.

1. JSX를 렌더링 한다. 그럼 Virtual DOM이 update 된다.

2. Virtual DOM이 이전 Virtual DOM과 비교를 해서 바뀐 부분을 찾는다.

3. 그 바뀐 부분만 Real DOM 에서 변경한다.

 

이 과정을 Diffing Algorithm이라고 한다. 

 

반응형

'Cs' 카테고리의 다른 글

30. php Loading Page While Page load(로딩페이지)  (0) 2022.06.26
29. php - loading Page while Page Load(로딩 페이지)  (0) 2022.06.26
27. NodeJS - express js 받기  (0) 2022.06.20
26. NodeJS란?  (0) 2022.06.09
25. async, await - Promise 2탄  (0) 2022.06.08