[BFE.dev] React re-render 3

React re-render 3

// This is a React Quiz from BFE.dev 

import * as React from 'react'
import { useState, useEffect } from 'react'
import { createRoot } from 'react-dom/client'

function A({ children }) {
  console.log('A')
  return children
}

function B() {
  console.log('B')
  return <C/>
}

function C() {
  console.log('C')
  return null
}

function D() {
  console.log('D')
  return null
}

function App() {
  const [state, setState] = useState(0)
  useEffect(() => {
    setState(state => state + 1)
  }, [])
  console.log('App')
  return (
    <div>
      <A><B/></A>
      <D/>
    </div>
  )
}

const root = createRoot(document.getElementById('root'));
root.render(<App/>)

출력 결과

"App"
"A"
"B"
"C"
"D"
"App"
"A"
"B"
"C"
"D"

풀이 과정

1. 초기 렌더링

• App 실행: 컴포넌트 트리 루트인 App이 실행됩니다.

• A 실행: App의 자식인 A를 호출합니다.

• B 실행: A의 children으로 전달된 B를 호출합니다.

• C 실행: B가 반환한 C를 호출합니다.

• D 실행: A 쪽 가지(branch)가 끝났으므로, App의 다음 자식인 D를 호출합니다.

2. 상태 업데이트 후 재렌더링

• App 재실행: 새로운 state 값으로 렌더링합니다.

• A 재실행: App이 재실행되면서 <A><B/></A> 코드가 다시 실행됩니다. 이때 A의 children인 <B/>는 매번 새로운 객체로 생성되므로, A는 "내용물이 바뀌었다"고 판단하여 재실행됩니다.

• B 재실행: A가 재실행되면서 새로 생성된 children(B)을 반환합니다. B 역시 App이 재렌더링될 때마다 매번 새로 생성된 엘리먼트이므로 재실행됩니다.

• C 재실행: B가 재실행됨에 따라 그 자식인 C도 자연스럽게 재실행됩니다.

• D 재실행: D 또한 App의 자식 컴포넌트이므로, App이 재렌더링될 때 함께 재실행됩니다.