React의 동작 원리를 알기위해서는 DOM을 알아야한다.
웹페이지가 렌더링 되는 과정은,
브라우저를 열면 일단 HTML parser가 HTML 구조를 바탕으로 DOM TREE 를 그린다.
그리고 나서 CS parser가 CSS를 바탕으로 CSSOM 을 그린다. *CSSOM - DOM에 CSS가 적용된 객체 모델
다음으로는 이제 DOM에 CSSOM을 적용해서 Render Tree를 그리고,
이 Render Tree를 painting해서 브라우저에 보여준다.
* html 코드를 읽다가 script를 만나면, 잠시 코드 읽는걸 중단하고, js파일을 로드한다.
-> 문제점: 이제 웹을 동적으로 (바뀐점같은걸 빠르게 보여주고싶은데) 자바스크립트는 코드도 길고, 코드가 길면 직관적이지도 않고, 직관적이지 않으면 유지보수에 문제도 간다.
그걸 해결하고자 나온게 Jquery -> 코드양이 작아지면서 자바스크립트의 문제점들을 해결.
그런데 Jquery의 문제는 이제 대형 사이트(FB, Instagram)에서 사용자들이 interaction이 많은곳에서 생긴다.
사람들의 요청은 많은데, Jquery는 일단 패키지가 무거워서 불러오는데 느리고, 잦은 연산을 사용하면 브라우저의 성능에 문제가 생김
그래서 나온게 Virtual DOM
-> JS나 Jquery처럼 DOM에서 직접 조작하지않고, 아예 새로운 가상DOM을 만들고, 그 DOM에 작업을함.
그리고 실제 DOM하고 가상DOM하고 비교해서 변경된 부분만 실제DOM에서 변경해줌.
이럴경우는 아예 DOM을 처음부터 로드하는거보다 기존에 있던부분말고 변경된 부분만 로드하면되서 속도가 빠름
(실제로 일반 브라우저는 바뀌면 아예 하얀창떳다 바뀌었다 하는데, REACT는 화면의 깜빡임없이 빠른속도로 값을 변경시킨다.)
그런데 이제 React 매 순간순간 재렌더링 하는건 아니고,
1. Props가 변경되었을 때
2. State가 변경되었을 때
3. forceUpdate() 를 실행하였을 때.
4. 부모 컴포넌트가 렌더링되었을 때
이렇게 4가지가 있다.