리액트 렌더링 프로세스

렌더링 프로세스

컴포넌트 트리의 루트부터 아래쪽으로 순차적으로 업데이트

1. Render 단계 (비동기)

• JSX 또는 React.createElement()를 통해 React element 생성
  • 클래스 컴포넌트인 경우 render() 함수 실행
  • 함수 컴포넌트인 경우 FunctionComponent() 자체를 호출
• 컴포넌트를 렌더링하고 이전 가상 DOM과 비교하여 변경사항 수집
• 사용자에게 노출되지 않는 모든 비동기작업을 수행 (파이버 작업, 스케줄링 등)

과거: 두 과정이 동기적으로 작동하여 렌더링 시간이 길어질수록 사용자 경험이 저해
현재: 비동기로 렌더링하여 의도된 우선순위대로 컴포넌트를 렌더링해 최적화 가능

2. Reconcile 단계

이전 DOM 트리와 새로 렌더링할 DOM 트리 비교 및 변경 부분 적용

3. Commit 단계 (동기)

1. 새로운 DOM element를 브라우저 뷰에 커밋
   재조정(reconciliation): 가상 DOM과 비교했을 때의 모든 변경사항을 수집하는 것
2. 재조정이 끝나고나면 모든 변경사항을 하나의 동기 시퀀스로 DOM에 적용
3. 변경사항을 모두 적용한 후 브라우저에서 실제 렌더링이 발생
4. 만들어진 새 가상 DOM으로 포인터 업데이트

4. Update 단계

props, state 변경 시 해당 컴포넌트와 하위 컴포넌트에 위 과정 반복