① 리액트에서 리렌더링 되는 시점
리렌더링이 발생하는 시점은 state가 변했을 때
- 리액트에서 state를 사용하는 이유
UI와 상태(state)를 연동시키기 위해서
UI는 어떠한 데이터가 있고 그것을 보기 편한 형태로 표현한 것
그래서 UI와 연동되어야 하고, 변할 여지가 있는 데이터들을 state라는 형태로 사용할 수 있게 해줌
그리고 데이터가 변경되었을 때 UI가 그에 맞춰서 변화하기위해 state를 변경시키는 방법을 제한시키고(setState), 이 함수가 호출 될 때 마다 리렌더링 되도록 설계
➡ 특정 컴포넌트의 state가 변한다면, 해당 컴포넌트와 해당 컴포넌트의 하위에 있는 모든 컴포넌트들은 리렌더링이 발생
② 리액트의 렌더링 과정
state가 변화되고 최종적으로 브라우저상의 UI에 반영되기까지 과정
-
기존 컴포넌트의 UI를 재사용할 지 확인
-
함수 컴포넌트 : 컴포넌트 함수를 호출 한다
Class 컴포넌트 :render메소드를 호출 한다
-
2의 결과를 통해서 새로운 VirtualDOM을 생성
-
이전의 VirtualDOM과 새로운 VirtualDOM을 비교해서 실제 변경된 부분만 DOM에 적용
브라우저 렌더링 과정
브라우저는 화면을 보여주기 위해서 HTML, CSS, JavaScript를 다운로드 받고 그를 처리해서 화면에 픽셀 형태로 그려낸다. = CRP(Critical Rendering Path)
- Critical Rendering Path
1. HTML을 파싱해서 DOM을 만든다.
2. CSS를 파싱해서 CSSOM을 만든다.
3. DOM과 CSSOM을 결합해서 Render Tree를 만든다.
4. Render Tree와 Viewport의 width를 통해서 각 요소들의 위치와 크기를 계산한다. (Layout)
5. 지금까지 계산된 정보를 이용해 Render Tree상의 요소들을 실제 Pixel로 그려낸다. (Paint)
➡ DOM 또는 CSSOM이 수정될 때 마다 위의 과정을 반복
➡ 이 과정을 최적화 하는 것이 퍼포먼스상에 중요한 포인트
➡ Layout, Paint 과정은 특히나 많은 계산을 필요로하는 부분이라서 이는 곧 브라우저에게 많은 연산을 요구하게 되고, 퍼포먼스를 저하시키는 요인!
➡ 리액트는 이 CRP이 수행되는 횟수를 최적화 하기 위해서 VirtualDOM을 사용하는 것
리액트의 렌더링 과정
VirtualDOM이란 리액트가 관리하고 있는 DOM과 유사한 객체형태로 만들어내며
이전의 VirtualDOM과 새로운 VirtualDOM을 비교해서 실제로 변화가 필요한 DOM요소들을 찾아내고 그 다음에 한번에 해당 DOM요소들을 조작
➡ CRP의 빈도를 줄일 수 있고 이게 VIrtualDOM을 이용해서 리액트가 수행하는 최적화
➡ 즉, 4.이전의 VirtualDOM과 새로운 VirtualDOM을 비교해서 실제 변경된 부분만 DOM에 적용한다. 에 해당하는 최적화는 리액트 내부적으로 수행하고 있다는 의미이고 이부분은 리액트를 사용하는 개발자입장에서는 따로 최적화를 수행할 여지가 없다.
개발자가 할 수 있는 최적화
1. 기존 컴포넌트의 UI를 재사용할 지 확인한다.
리렌더링 될 컴포넌트의 UI가 이전의 UI와 동일하다고 판단되는 경우 새롭게 컴포넌트 함수를 호출하지 않고 이전의 결과값을 그대로 사용하도록 함
3. 2의 결과를 통해서 새로운 VirtualDOM을 생성한다.
컴포넌트 함수가 호출되면서 만들어질 VirtualDOM의 형태를 비교적 차이가 적은 형태로 만들어지도록 하는 것
예를 들면, UI를 바꾸기 위해서 <div> tag를 <span> 태그로 변환시키는 것 보다는 <div className="block" /> 을 <div className="inline"> 으로 변환시키는 것이 VirtualDOM끼리 비교했을 때 차이가 적은 형태로 만들어지도록 하는 것
