[BFE.dev] React re-render 2

React re-render 2 - memo()

// This is a React Quiz from BFE.dev 

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

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

const B = memo(() => {
  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"
"D"

풀이 과정

1. 초기 렌더링

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

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

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

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

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

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

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

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

• B, C 실행 X: memo를 통해 props가 변하지 않는다면 자식 컴포넌트는 재렌더링되지 않습니다.

• D 재실행: D는 App이 재렌더링될 때 함께 리렌더링됩니다.