잘 모르던, 헷갈리던 개념들을 정리해본다
jQuery vs React
1) React는 jQuery보다 빠르다
기존 DOM대신 Virtual DOM을 사용하기 때문
2) DOM vs Virtual DOM
DOM은 내용을 업데이트 할 때, 최상위 트리부터 아래까지 업데이트 해야한다
Virtual DOM은 가상 사본(스크린샷)과 업데이트 된 DOM과 비교할 수 있다(diffing)
이를 이용해 변경된 부분만 업데이트를 할 수 있음
3) jQuery는 배우기 쉽고, 사용하기 쉽다. 하지만 앱이 커질수록 DOM조작이 많아짐에 따라 더 빠른 성능을 위해 React가 유리하다
4) jQuery는 소규모 앱에서 DOM 직접 조작, 이벤트핸들링, ajax 등을 쉽게 다루기 위해 주로 사용
출처 : https://ichi.pro/ko/jquery-daesin-reactleul-sayonghaeyahaneun-iyu-235894016744379
사견) SPA 페이지를 제작함에 있어 React가 유리해보임
reflow, redraw
- 브라우저의 렌더링 과정
1) 렌더링 엔진은 HTML과 StyleSheet를 해석해서 트리(DOM tree, CSSOM tree)로 만든다
2) DOM + CSSOM tree를 Render Tree로 만든다
3) 레이아웃 단계, 브라우저의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 단계(Reflow)
4) 초기 렌더링 시 외에도 브라우저의 크기를 변경하거나 스타일이 변경된다면 레이아웃이 바뀜
- Reflow : 생성된 DOM 노드의 레이아웃 수치 변경 시 영향 받은 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정
- Redraw (Repaint) : 재 생성된 렌더 트리를 다시 그리는 과정
레이아웃 수치가 변경된다면, Reflow와 Redraw가 발생한다.
하지만, 레이아웃 수치가 변경되어야만 Redraw가 발생하는 것은 아니다. 색상관련 스타일만 변경된다면, Reflow없이 Redraw만 발생할수도 있음.
-
Reflow가 발생하는 상황
1) 페이지 초기 렌더링
2) 노드의 추가 혹은 제거
3) 요소의 위치 변경
4) 요소의 크기 변경
5) 폰트 변경, 이미지 크기 변경
6) 윈도우 리사이징 -
Reflow 최적화
1) 스타일 변경이 필요한 경우, 가장 하위 노드의 클래스를 변경한다
2) 인라인 스타일 지양
3) 애니메이션이 있는 엘리먼트는fixed혹은absolute속성을 지정한다.
=> 해당 노드를 전체 노드에서 따로 관리하기 때문에, 애니메이션 노드만 Reflow가 발생
4)<table>레이아웃 지양
=> 조금만 변경이 생겨도, 모든 table을 다시 계산해야됨
5) CSS 표현식 지양
6) CSS 하위 선택자 최소화
=> 렌더링 트리 계산을 줄임
7)display: none속성 활용
=> 렌더 트리를 그릴 때, 해당 속성을 가지고 있다면 제외됨
8) 캐시 활용
Reflow와 Redraw를 최대한 줄이는 것이 성능 최적화의 좋은 방법!
React에서는 Virtual DOM을 활용하여, 차이점을 파악하고 실제 DOM에서의 Reflow, Redraw는 단 한번만 발생하여, 성능의 이득을 취할 수 있다고 한다!
출처 : https://www.youtube.com/watch?v=XoyWzOh3Sy4 , https://it-eldorado.tistory.com/87
렌더링 vs 마운트/언마운트
- Lify cycle
1) 처음 컴포넌트가 렌더될 때는 마운트를 거친다
2) props, state 등의 변경으로 리렌더링될 때는 마운트를 거치지 않는다
3) 마운트는 DOM이 생성되고, 브라우저 상에 나타나는 과정
출처: https://crmrelease.tistory.com/29
- 렌더링되는 경우
1) Props 변경
2) State 변경
3)forceUpdate()실행
4) 부모 컴포넌트 렌더링
