[BFE.dev] event callback

event callback

// This is a React Quiz from BFE.dev

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

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


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

(async function () {
  const action = await screen.findByText('click me')
  fireEvent.click(action);
})()

출력 결과

"render 0"
"handler"
"handler 0"
"render 1"

풀이 과정

1. 초기 렌더링

• render 0 출력: root.render(<App />)가 실행되면서 state의 초기값인 0으로 첫 렌더링이 일어납니다.

• handler 출력: 버튼 클릭 직후 onClick 핸들러 내의 첫 번째 console.log가 실행됩니다.

• setState(state => state + 1)를 통해 React에게 상태를 업데이트하라고 명령합니다. 비동기로 예약만 될 뿐 핸들러가 실행되는 도중에는 state 값이 변하지 않습니다.

• handler 0 출력: 이 로그가 실행될 때, state는 클로저에 의해 여전히 0인 상태입니다.

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

• render 1 출력: state를 1로 업데이트하며 컴포넌트를 다시 실행합니다.