react 의 원리

문제 :리엑트는 어떻게 작동할까? 왜 좋을까?

---

알아야할 단어

---

변화 (Mutation) 

 

Model 

 

Virtual Dom 

 

 

브라우저 랜더링 과정

---

 

상황

1. 웹 어플리케이션의 렌더 엔진이 HTML을 파싱하여 DOM tree 생성 

 

2.render tree 생성 css파일과 inline 스타일을 파싱   => DOM tree+ CSS 

 

3. Layout 각 노드들의 스크린의 자표에 따라 위치 결정(어디에 태그를 넣을건지를 지정)

 

4. Paint. 실제 웹 화면에 그리기

 

 

 

 

문제 : 태그의 속성이 바뀌거나 데이터가 변경이 되면 이 과정을 계속 바뀌게 된다. 이러한 연산을 한다는 거는 메모리 누수, 과부화 발생

---

 

인터랙션에 의해 DOM에 변화가 발생하면?? 데이터의 글자가 바뀐다, 숫자가 변화한다 등 등..

이면 이 과정을 반복한다. 

 

ex) 4번의 과정이 반복된다. 

 

 

해결

---

 

virtual DOM 등장

:자바스크립트 객체로 표현됨 그래서 실제 DOM이 아닌 메모리 상에서 작동하고 실제 렌더링이 되지 않음

연산비용이 최소화.  

 

이를 JSX 문법에 의한 각 각의 component의 return 값은 바벨을 통해 실제 리엑트React.creatElement("div")이라는 객체를 리턴함

 

이는 상태가 가볍고 불변성이 있는 element객체로 변함 그러면 ReatDOM은 render함

 

그러면 Diffing 을 통해서 기존에 있던 Virtual DOM과 바뀐 것을 검사함

 

비교를 해서 바뀐 부분을 업데이트하고 이를 실제 DOM 에 업데이트 됨.

 

예시

---

클릭을 하면 이미지가 추가 되는 예시

 

virtual Dom에 새로 생긴 태그 부분만 랜더링이 되고 업데이트가 됨 Diffing 알고리즘에 의해 기존에 virtual dom 과

교하여 바뀐 부분이 있으면 이를 실제 DOM에 반영이 되고 이 부분만 보여짐.

 

결론

---

 

1.이렇게 함으로써 컴퓨터의 메모리 연산이 크게 줄어듬

 

2. 랜더링을 최소화 할 수 있음