React 렌더링 최적화

✅ 렌더링

화면에 특정 요소를 그려내는 것
Vanila JavaScript를 사용하지 않고 React와 같은 프레임워크를 사용하는 이유 => 렌더링 과정을 잘 처리해 주기 때문에!

| 브라우저 렌더링

DOM 요소를 계산하고 그려내는것
HTML, CSS => DOM, CSSOM => 결합 => 위치 계산 => 그리기
브라우저에서 제공하는 DOM API를 JavaScript를 통해 호출하면서 브라우저에 그려진 화면을 변화시킨다

| Vanila Javascript vs React

Vanila Javascript

• 명령형, 절차형
• DOM에 직접 접근하고 수정해야한다

React

• 선언형 (React의 가장 큰 장점)
• 애플리케이션에서 보여주고 싶은 핵심 UI를 선언하기만 하면 됨
• DOM 을 조작하여 UI를 그려내고 변화시키는 일은 라이브러리, 프레임워크가 하게 된다

---

✅ React의 리렌더링

React의 리렌더링 발생시점, state 사용 이유

| React의 state 사용 이유

• UI와 상태(state)를 연동하기 위해
• 상태의 변화에따라 UI도 변화해야하기 때문에 변동의 여지가 있는 데이터를 state로!
• setState 로 state변경 방법을 제한
• setState 에 따라 리렌더링 발생

| React의 리렌더링 발생 시점

• state가 변했을 때
• state 변할 시 => 해당 컴포넌트 + 하위 모든 컴포넌트 리렌더링 발생

---

✅ React의 렌더링 과정

state 변화에서 브라우저에 UI 반영까지 각 컴포넌트는 4단계를 거친다

| React의 렌더링 과정 4단계

1,2,3 과정을 최적화하는 방법을 모색해야한다 4번의 과정은 알아서 해준다

1. 기존 컴포넌트 UI를 재사용할지 확인
2. 함수 컴포넌트 => 컴포넌트 함수 호출
   클래스 컴포넌트 => render 메소드 호출
3. 2의 결과로 새로운 Virtual DOM 생성
4. 이전의 Virtual DOM과 새로운 Virtual DOM 비교 => 실제 변경된 부분만 DOM에 적용

| React가 Virtual DOM을 사용하는 이유

React 는 CRP 수행 횟수를 최적화 하기위해 Virtual DOM 사용한다

브라우저의 CRP(Critical Rendering Path) 과정
CRP 과정 : 브라우저가 HTML, CSS, JavaScript 를 다운로드 받고 처리하여 화면에 픽셀로 그려내는 과정

1. HTML을 파싱하여 DOM을 생성
2. CSS를 파싱하여 CSSOM을 생성
3. DOM 과 CSSOM을 결함 => Render Tree 생성
4. Layout : Render Tree와 Viewport(뷰포트)의 width를 통해 요소의 위치와 크기를 계산
5. Paint : Render Tree 상의 요소들을 실제 Pixel로 그리기

• DOM과 CSSOM이 수정될 때마다 과정 반복으로 퍼포먼스의 저하 요인이 된다
• 특히 Layout, Paint 과정은 많은 계산이 필요하다
• React 는 CRP 수행 횟수를 최적화 하기위해 Virtual DOM 사용

| Virtual DOM

• React의 UI 변화가 생기면
  => 변화에 필요한 DOM 조작을 매번 바로 실제 DOM에 조작하는게 아니다
  => React가 관리하고 있는 DOM과 유사한 객체형태로 만들어낸다 (Virtual DOM)
  => 이전의 Virtual DOM과 새로운 Virtual DOM 비교한다
  => 실제 변화가 필요한 DOM 요소를 찾아낸다
  => 한번에 DOM요소 조작한다
• Virtual DOM 장점 : CRP의 빈도를 줄이고 리엑트 최적화를 내부적으로 수행하는 방법

| React에서 개발자가 할 수 있는 최적화

4번은 React의 내부적으로 수행하는 최적화이므로 1,2,3 에 집중해야한다
그중에서도 1,3에 집중!

1. 기존 컴포넌트의 UI를 재사용할지 확인

리렌더링 될 컴포넌트 UI와 이전의 UI가 동일할 경우 => 호출하지 않고 이전 결과값 그대로 사용하기 (React.memo)

3. 2의 결과를 통해서 새로운 Virtual DOM을 생성

Virtual DOM의 변화가 적도록 만들기

<div> => <span> 이렇게 말고
<div> => <div className = "change"> 이런식으로 

다음 포스팅은 구체적인 최적화 방안에 대해서 설명해보겠똬...!