[2장][효리] 리액트 핵심 요소 깊게 살펴보기

[hyoribogo]

퀴즈

(A) 다음 코드에서 파이버 작업 순서를 설명해보세요. 또한 이 작업 과정에서
(B) 리액트가 각각의 렌더링 결과물을 수집하고 이전 가상 DOM과 비교하며 계산하는 과정을 어떤 단어로 일컫는지 작성해주세요.

<A1>
  <B1>안녕하세요</B1>
  <B2>
    <C1 />
  </B2>
  <B3 />
</A1>

힌트: beginWork, completeWork, commitWork

답

정답

(A)

1. A1의 beginWork()가 수행된다.
2. A1은 자식이 있으므로 B1으로 이동해 beginWork()를 수행한다.
3. B1은 자식이 없으므로 completeWork()가 수행됐다. 형제가 있으므로 형제인 B2로 넘어간다.
4. B2의 beginWork()가 수행된다. 자식이 있으므로 C1으로 이동한다.
5. C1의 beginWork()가 수행된다. 자식도 형제도 없으므로 completeWork()를 호출한다.
6. B2가 completeWork()를 호출한다.
7. B2의 형제인 B3로 이동해 beginWork()를 수행한다.
8. B3은 자식도 형제도 없으므로 completeWork()를 호출한다.
9. 상위로 타고 올라가 A1의 completeWork()가 수행된다.
10. 루트 노드가 완성되는 순간, 최종적으로 commitWork()가 수행되고 이 중에 변경 사항을 비교해 업데이트가 필요한 변경 사항이 DOM에 변경된다.

(B)

리액트의 재조정(reconciliation)

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[khj0426]

A1의 beginWork실행!
A1의 자식이 있으니깐 B1의 beginWork실행!
B1은 자식이 없네? 작업 끝내 -> completeWork실행

B1의 형제 B2로 갑시당
B2의 beginWork실행!
B2의 자식이 있네? 그럼 자식으로 이동해서 C1의 beginWork실행 ! C1의 자식이 없네? C1의 CompleteWork실행
B2의 completeWork실행!

B2의 형제 B3로 갑시당
B3의 beginWork실행
B3의 자식이 없네? 바로 B3의 bcompleteWork실행

모든 형제를 살펴보았네? A1의 completeWork실행

모든 작업 끝 -> commitWork

재조정과정!

[hayamaster]

(A):

1. A1 beingWork()
2. B1 beingWork()
3. B1 completeWork()
4. B2 beingWork()
5. C1 beingWork()
6. C1 completeWork()
7. B2 completeWokr()
8. B3 beingWork()
9. B3 completeWork()
10. A1 completeWork()
11. commitWork()

(B) : 파이어 재조정