파트 6

6.0 파트 6 (클릭 가능)

초기 자식(children) 생성

이제 엘리먼트가 완성된 것처럼 보입니다, 이제 자식들과 함께할 수 있습니다. 여기 두 단계가 있습니다. 자식들은 (this.mountChildren)(1)에 마운트 되어야 하고, 부모(DOMLazyTree.queueChild)(2)에 연결되어야 합니다. 자식들의 마운팅이 분명히 더 재미있을 것이기 때문에 그쪽으로 이동해 봅시다.

자식들을 관리하기 위한 ReactMultiChild (src\renderers\shared\stack\reconciler\ReactMultiChild.js)라 별도의 모듈이 있습니다. 이제 mountChildren 메소드를 확인해 봅시다. 여기에는 두 가지 주요 작업이 포함됩니다. 우선, 자식들을 인스턴스화하고(이를 위해 ReactChildReconciler를 사용) 그들을 마운트합니다. 실제로 어떤 자식들이 여기에 있을까요? 그건 단순한 HTML 태그이거나 다른 커스텀 컴포넌트 일 수 있습니다. HTML을 처리하기 위해 ReactDOMComponent를 인스턴스화하고 커스텀 컴포넌트를 위해서는 ReactCompositeComponent를 인스턴스화해야 합니다. 다시 말하자면, 마운트 흐름(flow)은 하위 유형(type)이 무엇인지에 따라 달라집니다.

다시 한번 더 봅시다.

만약 당신이 이 글을 아직 읽고 있다면, 아마도 전체 프로세스를 한 번 더 명확히 검토해야 할 때입니다. 객체의 순서를 되새겨 봅시다.

6.1 전반적인 마운팅 스키마 (클릭 가능)

1) 리엑트는 각각의 커스텀 컴포넌트(componentWillMount 등과 같은 컴포넌트 라이프 사이클 훅을 포함한)를 위해 ReactCompositeComponent를 인스턴스화하고 마운트합니다.

2) 마운트하는 과정 중에 가장 먼저 커스텀 컴포넌트의 인스턴스가 생성됩니다.(constructor가 호출 됨).

3) 그런 다음 render 메소드가 호출되고(간단한 예를 들면, render는 div를 리턴합니다), React.createElement는 리엑트 요소를 만듭니다. 리엑트 요소는 직접 호출 되거나, JSX가 Babel에 의해 파싱된 후에 호출 될 수 있고, 랜더시 태그를 대체(replacing) 할 수도 있지만 이러한 부분들은 현재 필요로하는 것이 아닙니다. 아래의 내용을보십시오.

4) div위한 DOM 컴포넌트가 필요합니다. 그래서 인스턴스화 과정에서 엘리먼트 객체(위에서 언급한)로부터 ReactDOMComponent의 인스턴스를 생성합니다.

5) 그런 다음 DOM 컴포넌트를 마운트해야합니다. 이는 실제로 DOM 엘리먼트를 만들고 이벤트 리스너등을 할당한다는 것을 의미합니다.

6) 이제, DOM 컴포넌트의 초기 자식 항목들을 처리합니다. 자식들의 인스턴스를 생성하고 마운트합니다. 각각의 자식들의 항목이 커스텀 컴포넌트인 경우 1단계 부터 반복하고, HTML 태그인경우 5단계 부터 반복합니다. 그리고 모든 내부 엘리먼트들에게도 적용됩니다.

이게 전부입니다. 보시는 것처럼 꽤 간단합니다.

이제 기본적으로 마운팅은 완료되었습니다. componentDidMount 메소드를 대기열에 넣으십시오! 잘 하셨습니다.