[React] 리액트 렌더링 원리

사전지식

프로세스

단순히 실행중인 프로그램

운영체제에 의해 메모리를 할당받아서 실행중인 것

 

쓰레드

프로세스 내에서 실제로 작업을 수행하는 단위

즉, 프로세스의 실행 흐름의 최소 단위

 애플리케이션을 실행시키면, 스레드들이 자기가 맡은 일을 한다.

 

예시

카카오톡을 실행했을 때

• 메세지를 전송하는 역할을 가진 스레드가 실행
• 메세지를 수신하는 역할을 가진 스레드가 실행

여러개의 스레드는 프로세스가 실행되기 위해 각자 역할을 도맡아서 일을 한다.

 

리엑트에서의 스레드

리액트 코드가 실행되는 브라우저(자바스크립트 환경) 에서는 단 하나의 스레드만 실행된다.

 

만약, 리액트 state 가 업데이트 될 때 실행되는 순서

1. 사용자 입력을 받아 상태 업데이트

2. `render()` 함수 실행

3. `Reconcile` 과정 수행 (JSX -> HTML 변환하는 과정)

4. 등록된 effect실행

 

 

Reconcile 과정

리액트는 original dom을 복사한 virtual dom을 가지고 있다. (DOM: Javascript object 로 만든 Document Object Model)

리액트는 virtual dom 을 통해 필요한 element들을 업데이트한다.

UI가 변경이 되어야 해서, 특정 dom이 변경되어야 한다면,

dom이 변경된 위치와, 그 변경으로 영향을 받는 것을 변경전 dom 과 변경후 dom 비교해서 그부분만 업데이트한다.

최종적으로 DOM을 UI에 업데이트한다.

 

그래서?

위의 1~4 의 과정은 state가 업데이트될 때 마다 일어난다는 것이다.

만약 state가 여러번 동시에 업데이트가 일어난다면, 위의 과정이 계속 일어난다.

위에서 언급했듯이, React가 실행하는 환경은 하나의 스레드만 실행되므로, 

1~4 의 과정이 동시에 이루어지지않고 순차적으로 실행될 것이다.

 

state가 여러번 업데이트 -> 1~4 과정이 여러번 쌓임 -> 순차적으로 실행

이 될텐데, 만약, 해당 로직이 복잡하다면 버벅이게 될 것이다.