위와 같이 ReactDOM.render() 함수를 호출하면 JSX문법을 변환한 Javascript 코드를 이용해서 Virtual DOM을 만들기 시작한다.
render() 함수를 호출할 때 React.createElemet(App) 객체를 파라미터로 전달하며, render() 함수는 React에서 사용하는 타입의 컴포넌트를 생성한다.
이때 생성하는 컴포넌트는 주로 ReactCompositeComponent 객체와 ReactDOMComponent 객체다.
ReactCompositeComponent 객체는 DOM이 아닌 컴포넌트를 생성할 때 사용된다. ReactDOMComponent 객체는 DOM을 만들 때 생성하는 컴포넌트다.
render() 함수가 생성한 컴포넌트를 React 컴포넌트에 마운트하기 위해 ReactReconciler.mountComponent() 메서드를 호출한다. ReactReconciler.mountComponent() 메서드에서는 실제 ReactCompositeComponent 객체와 ReactDOMComponent 객체의 mountComponent() 메서드를 호출하며, 이 시점에 주요 작업이 시작된다.
ReactCompositeComponent
ReactCompositeComponent의 주요 작업은 다음과 같다.
constructor() 메서드 실행
componentWillMount() 메서드 실행
렌더링 실행
배치 처리 작업(ReactReconcileTransaction 객체)에 메서드나 속성 등록
componentDidMount() 메서드가 있으면 componentDidMount() 메서드 등록
ref 속성이 있으면 attachRefs 속성 등록
하위 ReactComponent 객체가 있으면 ReactComponent 객체를 생성하고 다시 ReactReconciler.mountComponent() 메서드를 실행
App 컴포넌트가 생성되면 <div> 엘리먼트를 생성한다. <div> 엘리먼트와 같은 실제 DOM과 함께 ReactDOMComponent 객체가 생성되며 주요 작업은 다음과 같다.
실제 DOM 생성
style 속성과 attr 속성 추가
배치 처리 작업(ReactReconcileTransaction 객체)에 사용자 이벤트 등록
하위 ReactComponent 객체가 있으면 ReactComponent 객체를 생성하고 다시 ReactReconciler.mountComponent() 메서드를 실행
최상위 DOM(root DOM)에 DOM을 추가(현재 최상위 DOM은 document 객체에 추가되지 않은 상태)
자식 컴포넌트로 내려가면서 ReactDOMComponent 객체와 ReactCompositeComponent 객체의 주요 작업을 반복적으로 실행하며 Virtual DOM을 생성한다.
이렇게 Virtual DOM이 완성된 후 등록된 배치 처리 작업이 다음과 같이 실행된다.
ReactReconcileTransaction 객체
componentDidMount() 메서드를 실행한다(componentDidXXX() 메서드 실행 시점에는 DOM에 접근할 수 있다).
기본이벤트를 등록한다.
추가한이벤트를 등록한다.
ref 속성 추가 등 기타 작업을 실행한다.
ReactDefaultBatchingStrategy 객체
componentWillMount() 메서드와 componentDidMount() 메서드에서상태를 변경했다면 이 시점에 상태를 갱신하는 작업이 시작된다.