[BFE.dev] React re-render 4

React re-render 4

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

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

출력 결과

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

풀이 과정

1. 초기 렌더링

• App 실행: 컴포넌트 트리 상단을 먼저 읽습니다.

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

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

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

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

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

• A 재실행: A는 state값이 변해 재렌더링됩니다.

• B, C , D 실행 X: A 스스로가 B를 새로 생성한 것이 아니라 App에서 받아온 것이기 때문에 참조값이 동일함(Object.is)으로 A만 재렌더됩니다. App이 재실행되지 않았기 때문에, A에게 전달된 children 객체는 메모리상에서 동일한 주소를 유지하고 있습니다.