이 글을 작성하기 앞서 Compose 의 패러다임은 React 의 개념을 많이 차용하였다고 한다.
해서 Compose 를 공부하기 전에 React 가 무엇인가 부터 집고 가면 Compose를 이해하기 쉬울것이라 생각하여 작성하게 되었다.
1. 웹 브라우저는 어떻게 동작할까?
React를 이해하려면 먼저 웹 브라우저가 어떻게 동작하는지 알아야 한다.
1.1 브라우저 렌더링 프로세스
웹 브라우저가 화면을 그리는 과정은 다음과 같다:
- 1. HTML 파싱 (Parse) : 브라우저가 HTML 코드를 읽고 DOM(Document Object Model) 트리를 구성
- CSS 적용 (Style) : 각 엘리먼트에 스타일 규칙을 적용
- Render Tree : DOM 과 CSSOM 을 합쳐 웹의 청사진을 그려냄
- 레이아웃 계산 (Layout) : 각 엘리먼트의 위치와 크기를 계산하여 배치를 결정함
- 렌더링 (Paint & Composite) : 실제 픽셀을 화면에 그림 (가장 무거운 부분!!!)
- HTML을 브라우저가 해석하기 편한 방식으로 변환한 객체 트리
1.2 그렇다면 업데이트는 어떻게 이루어질까?
업데이트 : 이벤트에 따라 실시간으로 변화하는 것 ex) 좋아요 버튼 등..
- JacaScript가 DOM을 수정하면 업데이트가 발생함
- DOM이 수정되면 Critical Rendering Path가 다시 실행됨
여기서 문제는
Layout, Painting 작업은 굉장히 무거운 작업을 하기 때문에 자주 발생하면 멈추거나 유저에게 안좋은 경험을 제공한다!
코드로 예시를 들면 아래는 클릭 시 리스트를 추가하는 코드이다. 아래와 같은 코드가 작업 시 렌더링이 3000번 일어난다.
그렇다면 측정결과 4.500m 이 발생한다.!!!
위의 코드를 어떻게 개선하면 좋을까?
다음은 아래와 같이 수정하였다. 아래와 같이 수정 시 DOM을 한번만 수정하여 성능이 급격히 올라갔다.
결론은 위와 같은 문제를 해결하기 위해서는 다양한 업데이트를 한대 모아서 한번에 수정하는것이 성능측면에서 압도적으로 유리하다.
그런데 여기서 드는 생각은 간단한 프로젝트는 내가 해줄 수 있겠지만 서비스의 규모가 커진다면 모든걸 챙겨 가는건 정말 어렵다.
해서 등장한것이 React 이다!!
React Js에서는 자동으로 해준다!
2. React 렌더링 프로세스
React의 렌더링 프로세스는 2단계를 거쳐 화면에 UI를 렌더링을 하게 된다.
2-1. Render Phase
- 컴포넌트를 호출하여 결과값을 계산한다.
- React Element 들을 모아 Vitual DOM을 생성한다.
Vitual DOM이란?
React Element 라고 부르는 객체 값의 모임이다.
- 실제 DOM은 아니다.(복제판)
- 값으로 표현된 UI(Value UI)라고 이해하면 정확하다.
2-2. Commit Phase
- Virtual DOM 을 Actual DOM에 반영한다.
위의 React 렌더링 프로세스를 정리하면 아래와 같다.
이렇게 복잡하게 하는 이유는 뭘까? 이유는 단순하다. DOM 수정을 최소하하기 위해서 이다!!
그렇다면 업데이트가 발생 시 어떻게 될까?
1. Render Phase 를 처음부터 다시 실행 시켜 새로운 Vitual DOM 을 생성한다.
2. Next Vitual DOM 과 Pre Vitual DOM과 차이점을 비교한다.
3. 계산된 차이점을 Actual DOM에 한번에 업데이트 한다.
이러한 과정을 Reconciliation이라고 부른다.
이러한 과정은 "대부분의 상황에서 충분히 빠른속도"를 제공한다. 항상 최고의 속도를 보장하는 것은 아니다!! 이유는 Vitual DOM을 생성하고 비교하는데 연산이 소요되기 때문이다.