리액트 코어 동작 순서를 간략하게
리액트의 전반적인 훅동작,스타일 입혀지는 시점 , 사이드 이펙트 발생시점, 에러처리 시점 등 각종 요소들이 어디서 언제 실행되는지 간략히 요약한 글입니다.
실제 처리과정은 더 복잡하지만 최대한 요약한겁니다.
전부 달달 외울 필요는 없지만 개발도중 햇갈릴때보면 도움이됩니다.
리액트 작동은 같은 3가지 행위자 관점으로 봐도됨.
- 스케줄링 ( Scheduler ) : 스케줄러가 계획짬
- 계산 및 비교 조정 ( Reconciler) : 리컨실러가 조정 해줌
- DOM 반영 ( Renderer ) : 렌더러가 조정된 결과를 반영 해줌.
이걸 조금 더 구체적인 순서대로 보면 아래와 같음.
순서
React Core
- React Element 생성 (React 코어)
준비 및 계산 (Reconciler/Scheduler 중심)
- 상태 업데이트 감지 및 Batching 수행 (Reconciler)
- 업데이트 작업 스케줄링 (Scheduler)
- 변경 내용 계산 및 비교 - Reconciliation (Reconciler)
- 생명주기 메서드 호출 / 훅 (Hooks) 준비 (Pre-Commit)
실제 반영 (Renderer 중심)
- 렌더링 명령 생성 (Renderer)
- DOM 조작 및 커밋 (Renderer)
후처리 및 UI 결과 (브라우저 + React DOM 중심)
- 페인팅 (브라우저 렌더링 엔진)
- useEffect 실행 및 이벤트 처리 연결 (React DOM)
- 오류 감지 및 Error Boundary 처리
위 과정이 항상 선형적으로 작동하란 보장은없음.
nodejs 런타임 환경 특성상 이 모든건 동시에 이뤄짐. 또한 vdom에서의 변화 값에 따라 다름.
Reconciler가 정리한 Fiber 트리 (react dom 객체라 생각해도됨 )
( 단 몇몇 동작은 이전 동작이 마무리 되어야 진행 가능함.)
1. React Element 생성 (React 코어)
React 코어: jsx 파일을 읽고 컴포넌트와 props를가진 React Elements를 생성함 이 단계에서는 실질적인 변화는 없고, 컴포넌트함수,클래스 와 같은게 호출되서 React Elements를 반환함
1. jsx ⇒
2. React 생성함수 ⇒
3. dom object
순서로 이해하면 편함. 이미지로 설명하면 
jsx 코드를 이렇게 쓰면
리액트는 이렇게 받아드림.
2. Batching (Reconciler)
상태 업데이트 감지 및 Batching ,상태 업데이트를 묶음 처리
- 어떤 컴포넌트가 업데이트되어야 하는지 계산
- 상태 변화가 발생했을 때 어떤 컴포넌트를 리렌더링할지 결정
3. 업데이트 작업 스케줄링 (Scheduler)
우선순위에 따라 작업 예약
- 작업의 우선도에따라 스케줄링 함
- 현재 상태에 따라 어떤 작업을 먼저 처리할지 결정
4. 변경 내용 계산 및 비교 (Reconciler)
최소한의 리렌더링,값 변경을 위한 작업 으로
key 값이나 props가 이 단계에서 비교 대상이됨.
5. 생명주기 메서드 호출 / 훅 (Hooks) 준비 (Pre-Commit)
useLayoutEffect와 같이 dom에 변경점이 그려지기 바로 직전에 실행되는 단계
각종 리액트 라이프 사이클에 관여하는 메서드 들을 호출 하는 단계이기도함.
6. 렌더링 명령 생성 (Renderer)
Reconciler가 정리한 Fiber 트리 (간단히 이해하려면 react dom tree 객체라 생각해도됨 )의 변경점들을 읽고 dom에 이 변경점들을 반영하는 실행 함수들을 실행 컨텍스트에 올려두는 단계
- 변경점이 fiber에 저장은 되었지만 아직 dom변경 실행전임
7. DOM 조작 및 커밋 (Renderer)
실제로 dom 을 변경하는 단계로 dom의 각종 속성들을 변경하고 (삽입 수정 삭제)
dom에 적용되어있는 이벤트 핸들러들을 연결 시키고 ref의 값이 생성됨.
하지만 눈에 보이지는 않음.
8. 페인팅 (브라우저 렌더링 엔진)
변경,생성된 dom 속성값들이 적용되어 눈에도 변경된게 보이는 단계
ref값을 사용해 진행되는 메서드의 경우 이 단계까지 와야 변경됨.
스타일도 이타이밍에 입혀짐.
9. useEffect 실행 및 이벤트 처리 연결 (React DOM)
react 내의 사이드 이펙트 처리를 실행하는 단계. 리액트 dom요소 외에 api 호출, 비동기 타이머 , 서드 파티 라이브러리 등이 이 시점에 동작함.
10. 오류 감지 및 Error Boundary 처리
실행 후 발생한 오류들을 처리하는 단계.
