[BFE.dev] React re-render 1

React re-render 1

// 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() {
  console.log('A')
  return <B/>
}

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 state={state}/>
      <D/>
    </div>
  )
}

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

출력 결과

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

풀이 과정

1. 초기 렌더링

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

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

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

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

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

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

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

• A, B, C 재실행: A는 state를 props로 받고 있으므로 재렌더링됩니다.

• D 재실행: D는 state를 받지 않음에도 App이 재실행되었기 때문에 재렌더링됩니다.