1관문. Stale Closure

관문 1 / 7

빠르게 클릭해도 카운터가 정확히 올라가도록 Stale Closure 함정을 제거하라.

📖 이론 비급

Stale Closure: 낡은 클로저의 함정

setState(count + 1) 형태는 해당 렌더 시점의 count를 캡처한다. 연속 클릭 시 모든 핸들러가 같은 count 값을 참조하여 마지막 클릭만 반영된다.

해결책: 함수형 업데이트 setState(prev => prev + 1)를 사용하면 리액트가 최신 상태를 인자로 전달하므로 클로저 문제가 사라진다.

⚔️ 수련 코드

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    // 문제: 세 번 연속 호출해도 +1만 된다
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+3 클릭</button>
    </div>
  );
}

Open Sandbox