[BFE.dev] callback props

callback props

// This is a React Quiz from BFE.dev 

import * as React from 'react'
import { memo, useState} from 'react'
import { createRoot } from 'react-dom/client'
import { screen, fireEvent } from '@testing-library/dom'

function _A({ onClick }) {
  console.log('A')
  return <button onClick={onClick} data-testid="button">click me</button>
}

const A = memo(_A)

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

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

// click the button
;(async function() {
  const button = await screen.findByTestId('button')
  fireEvent.click(button)
})()

출력 결과

"App"
"A"
"App"
"A"

풀이 과정

1. 초기 렌더링

• App 출력: root.render(<App/>)에 의해 App이 실행됩니다.

• A 출력: 자식 컴포넌트 A가 처음으로 렌더링됩니다. 이때 prop으로 화살표 함수 () => { }가 전달됩니다.

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

• App 출력: 상태 업데이트에 의해 App 컴포넌트가 다시 호출됩니다.

• A 출력: prop이 변경된 것으로 간주되어 자식 컴포넌트 A가 다시 실행됩니다.

  ✨ 자바스크립트에서 () => {}는 생성될 때마다 새로운 참조값을 가집니다. 이전의 onClick과 현재의 onClick은 내용은 같아도 주소값이 다른 서로 다른 객체입니다.

  memo의 얕은 비교: memo는 전달받은 prop이 변했는지 확인합니다. onClick 함수의 참조값이 바뀌었기 때문에 memo는 "prop이 변했다"라고 판단하고 A를 다시 렌더링합니다.