🧸 브라우저에서의 렌더링 vs 리액트의 렌더링

📍 브라우저에서의 렌더링

• HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정

📍 리액트의 렌더링: 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정

• 시간과 리소스를 소비해 수행되는 과정
• 이 비용은 모두 웹 애플리케이션을 방문하는 사용자에게 청구됨
• 시간이 길어지고 복잡해질수록 유저의 사용자 경험을 저해함 => 따라서 렌더링 과정을 최소한으로 줄여야 함 ✨

🧸 리액트의 렌더링이란?

리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미함

👀 컴포넌트가 props와 state와 같은 상태값을 가지고 있지 않다면, 해당 컴포넌트가 반환하는 JSX 값에 기반해 렌더링이 일어나게 됨

🧸 렌더링이 발생하는 시나리오

1. 최초 렌더링
2. 리렌더링: 최초 렌더링이 발생한 이후로 발생하는 모든 렌더링을 의미함
   • 클래스형 컴포넌트
     • setState가 실행되는 경우
     • forceUpdate가 실행되는 경우
       • shouldComponentUpdate는 무시하고 건너뜀 (하위 모든 컴포넌트에 적용)
       • render 내에서 forceUpdate()가 사용되면 무한루프에 빠지므로 사용하지 말기
   • 함수형 컴포넌트
     • useState()의 두 번째 배열 요소인 setter가 실행되는 경우
     • useReducer()의 두 번째 배열 요소인 dispatch가 실행되는 경우
   • 컴포넌트의 key props가 변경되는 경우

🤔 useState 등으로 관리되지 않는 단순한 변수는?

• 변경된다 하더라도 리렌더링을 발생시키지 않아 변경된 값을 렌더링된 DOM에서 확인할 수 없음

🧸 리액트의 렌더링 프로세스

1. 렌더링 프로세스가 시작되면 리액트는 컴포넌트의 루트에서부터 차근차근 아래쪽으로 내려가면서 업데이트가 필요하다고 지정돼 있는 모든 컴포넌트를 찾음

2. 클래스형 컴포넌트의 경우 클래스 내부의 render() 함수 실행 함수형 컴포넌트의 경우 FunctionComponent() 그 자체를 호출한 뒤에 그 결과물을 저장함

   • 렌더링 결과물은 JSX 문법으로 구성돼 있고, 이것이 자바스크립트로 컴파일되면서 React.createElement()를 호출하는 구문으로 변환됨

   • createElement는 브라우저의 UI 구조를 설명할 수 있는 일반적인 자바스크립트 객체를 반환함

   • 렌더링 결과물 예시

     {type: TestComponent, props: {a: 35, b: "yceffort", children: "안녕하세요"}}
     
     

3. 재조정 과정: 각 컴포넌트의 렌더링 결과물을 수집 -> 가상 DOM과 비교해 실제 DOM에 반영하기 위한 모든 변경 사항을 차례차례 수집함

4. 재조정 과정이 모두 끝나면 모든 변경 사항을 하나의 동기 시퀀스로 DOM에 적용해 변경된 결과물이 보이게 됨