React 이벤트에서 이전 상태값으로 계산된 결과가 저장됨
같은 이벤트나 비동기 콜백에서 상태를 여러 번 변경할 때 이전 렌더링의 값을 계속 사용하고 있는지 확인합니다.
빠른 답변
- 우선 확인할 원인
- React 상태 변수는 현재 렌더링의 스냅샷이므로 같은 실행 안에서 값을 직접 더해 여러 번 setState하면 같은 이전 값이 사용될 수 있습니다. 이전 값에 의존하는 갱신은 함수형 업데이트로 비교해야 합니다.
- 먼저 확인할 항목
- 버튼을 한 번 눌렀는데 카운터·수량·배열이 예상보다 한 번만 변경되는지 확인합니다.
- 적용 범위
- 현재 증상과 본문에 적은 관찰 조건이 함께 확인된 경우문맥: 바이브 코딩
- 출처
- React
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
- 관련 기술
현재 증상
- 화면 동작 오류
- 데이터 무결성 위험
먼저 확인할 항목
버튼을 한 번 눌렀는데 카운터·수량·배열이 예상보다 한 번만 변경되는지 확인합니다.
setState 호출이 현재 상태 변수와 덧셈·토글·배열 추가를 직접 조합하는지 확인합니다.
지연된 Promise·setTimeout·이벤트 콜백이 오래된 상태를 캡처하는지 확인합니다.
함수형 업데이트와 직접 값 전달의 결과를 별도 테스트로 비교합니다.
피해야 할 조치
주의
- 렌더링 직후 상태 변수가 바로 바뀐다고 가정해 후속 API 요청을 만들지 않습니다.
- 중복 저장을 막기 위해 서버의 검증이나 멱등성 처리를 제거하지 않습니다.
환경별 원인과 조치
확인 순서
- 한 번의 클릭·제출에서 기대한 변경 횟수와 실제 결과를 기록합니다.
setCount(count + 1)처럼 현재 렌더링의 값을 직접 사용한 호출이 반복되는지 찾습니다.- 지연된 콜백이 생성된 시점의 상태를 캡처하고 있는지 확인합니다.
- 이전 값에 의존하는 갱신을
setCount((value) => value + 1)형태로 바꾼 테스트와 결과를 비교합니다.
상태가 갱신된 직후의 값을 반드시 사용해야 한다면 다음 렌더링에서 실행되는 effect 또는 서버 응답을 기준으로 처리하십시오. 브라우저 로그만으로 저장 성공을 단정하지 마십시오.
참고 자료
State as a Snapshot | React (새 창에서 열림)
React · 공식 자료 · 확인 범위: 상태 변수는 렌더링 시점의 스냅샷이며 같은 이벤트 핸들러 안에서 즉시 변경되지 않습니다., 이전 상태를 기준으로 여러 번 갱신할 때 updater 함수를 사용할 수 있습니다. · 확인일: 2026-08-04