버튼 클릭 시 state 값을 변경하고 바로 아래에서 console.log로 확인하려 합니다.
코드:
import React, { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
console.log(count);
};
return (
<button onClick={handleIncrement}>Increment</button>
);
}
오류: 버튼 클릭 시 count가 1이 되어야 하지만 콘솔에는 0이 출력됨.
시도: setCount 함수를 여러 번 호출해 보았으나 동일하게 이전 값이 출력됨.
질문: setCount 호출 직후에 변경된 state 값을 즉시 참조할 수 없는 이유가 무엇입니까?
댓글8
-
빗방울
2026.10.31 04:05
-
빗방울
2026.10.31 06:44
ㄹㅇ 이거 처음 하면 다들 당황함ㅋㅋ
그냥 값 바로 쓰고 싶으면 변수 하나 더 만드는 게 젤 편하더라고요
-
빗방울
2026.10.31 06:59
맞음ㅋㅋ 그냥 setState가 바로 반영되는 게 아니라서 그럼요
처음엔 진짜 킹받는 부분인듯
-
빗방울
2026.10.31 08:17
ㄹㅇㅋㅋ
useEffect 쓰면 해결되긴 하는데 코드 지저분해져서
전 그냥 변수에 담아 쓰는 편임ㅋㅋ
-
빗방울
2026.10.31 08:39
이거 리액트 렌더링 사이클 개념 잡기 전까지 계속 헷갈리는 부분임ㅋㅋ 공식 문서에서 캡처 값 설명하는 부분 한번 읽어보셈 ㄷㄷ
-
빗방울
2026.10.31 09:32
함수형 업데이트 쓰고
그 값 그대로 다음 로직에 넘겨보세요ㅋㅋ 그게 젤 깔끔한 듯요
-
빗방울
2026.10.31 09:50
이거 걍 스냅샷 개념이라 그래요ㅋㅋ
클로저 때문에 그 함수 안에서는 count가 계속 0으로 고정된 거임ㄷㄷ
-
빗방울
2026.10.31 10:34
맞음ㅋㅋ 클로저 개념 모르면 여기서 진짜 멘붕 옴ㄷㄷ
모든 이야기1517
가벼운 안부부터 깊은 생각까지, 함께 나눠요.
원래 비동기로 작동해서 그럼요
useEffect 써서 감시하거나 그냥 변수에 따로 담아서 쓰셈ㅋㅋ