1.0. React 렌더링

1.1. 렌더(Render)단계와 커밋(Commit)단계

• 렌더링이라고 하는 것은 사용자 화면에 콘텐츠를 그려내는 것을 의미한다. 화면에 그려지기까지 내부적으로 여러 과정을 거치지만 크게 React 렌더링 과정과 Browser 렌더링 과정으로 나눌 수 있다.
• React 렌더링은 렌더 단계와 커밋 단계로 나눌 수 있다.
  • Render 단계는 재조정으로 가상 DOM 요소의 변화를 감지하고 필요한 업데이트를 결정하는 단계
  • Commit 단계는 Render 단계에서 결정된 변경 사항들을 실제 DOM에 반영하는 단계

1.2. 트리거 단계 (Trigger Phase)

• React에서 렌더링은 크게 두가지로 나눌 수 있다.
  • 사용자가 페이지를 처음 방문 했을 때 초기 렌더
  • 상태가 업데이트 될 때 일어나는 리렌더링
• 트리거 단계 - 초기 렌더
  • 사용자가 처음 사이트에 방문하면 리소스를 서버에 요청하고 앱이 실행된다.
  • React Dom의 render( ) 메소드를 호출하고 루트 컴포넌트를 화면에 그린다.
• 트리거 단계 - 리렌더링
  • 앱이 실행되고 다음 렌더는 상태 업데이트 함수가 호출되어 상태가 변했을 때 발생한다.
  • 상태 업데이트 함수가 호출되면 렌더링 해야 되는 것을 큐에 입력한다.
  • 그 후 큐를 확인하고 순차적으로 렌더링 작업을 수행한다.

1.3. 렌더 단계 (Render Phase)

• Render가 Trigger 되면 Render 단계로 넘어가 DOM에 그려질 요소들을 파악하는 과정을 거친다.
• 요소들을 파악하는 단계 또한 초기 렌더와 리렌더로 구분 가능하다.
  • 초기 렌더에서 렌더 단계는 render( ) 메소드의 루트 컴포넌트를 호출한다.
  • 리렌더링에서 렌더 단계는 상태 업데이트가 발생한 컴포넌트를 호출한다.
• 렌더 단계 - 초기 렌더
  • 초기 렌더에는 브라우저가 엔트리 파일을 읽으면서 루트 요소부터 파악한다.
  • render( ) 메소드가 호출되면 리액트는 createElement( )로 해당하는 태그명의 HTML 요소들을 생성한다
• 렌더 단계 - 리렌더링
  • 리렌더시에 렌더 단계는 이전에 생성한 가상 DOM 트리와 새로 만든 가상 DOM 트리를 비교
  • 실제 DOM에 반영할 변경 사항들을 파악한다.
  • 최소한의 변경 사항만 파악하기 위해 상태 업데이트가 발생한 컴포넌트를 호출 하고 새로운 가상 DOM 트리를 만든다.
  • React가 이전 렌더와 다음 렌더의 변화를 비교하는 과정을 재조정이라고 한다.
  • 리액트는 렌더 간 어떤 요소와 속성들이 변했는지를 파악하고, 이 정보를 커밋 단계에서 사용합니다.

1.4. 커밋 단계 - (Commit Phase)

• 커밋 단계에서는 직전 렌더 단계에서 두 가상 DOM 트리 간 변화를 실제 DOM에 적용하는 단계
• 커밋 단계 또한 초기 렌더와 리렌더에 다르게 동작한다.
  • 초기 렌더에서의 커밋 단계는 렌더 단계에서 파악한 DOM 노드들을 DOM에 반영한다.
  • 리렌더링에서의 커밋 단계는 렌더 간 발생한 최소한의 변경 사항들을 DOM에 반영한다.