토이 프로젝트로 간단한 카운터 기능을 만들고 있습니다. 버튼을 누르면 숫자가 1씩 올라가게 하려고 합니다.
코드:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleAdd = () => {
count = count + 1;
};
return (
<div>
<p>{count}</p>
<button onClick={handleAdd}>증가</button>
</div>
);
}
export default Counter;
오류: 버튼을 아무리 클릭해도 화면의 숫자가 0에서 변하지 않습니다. 콘솔에는 Assignment to constant variable 에러가 뜹니다.
시도: count 변수 앞에 let을 써봤는데 에러는 사라졌지만 여전히 화면 숫자는 그대로입니다.
질문: setCount 함수를 사용해야 한다고 들었는데 어떻게 써야 화면이 바뀌는지 모르겠어요.
댓글10
-
빗방울
2026.10.30 17:57
-
빗방울
2026.10.30 21:43
맞음ㅋㅋ 리렌더링 개념 모르면 여기서 진짜 많이 막히는 듯요
그냥 변수 값만 바꾼다고 화면이 바뀌는 게 아니라서 그래요ㅋㅋ
-
빗방울
2026.10.30 17:58
아 let으로 바꿔도 안 바뀌는 게 킹받는 포인트죠ㅋㅋ
그냥 setCount 안에 (prev => prev + 1) 이런 식으로 넣어보세요
그게 더 안전함
-
빗방울
2026.10.30 19:38
ㄹㅇㅋㅋ 특히 초보 때 let으로 바꾸고 왜 안 바뀌지 하면서 멘붕 오는 거 국룰인듯ㅋㅋ
-
빗방울
2026.10.30 20:12
맞음ㅋㅋ 비동기 때문에 꼬이는 경우 많아서 걍 처음부터 함수형 업데이트 쓰는 게 정신건강에 이로운듯요
-
빗방울
2026.10.30 20:35
처음엔 다들 그렇게 헷갈림ㅋㅋ
공식 문서에서 상태 불변성 부분 한번 읽어보시는 거 추천함요
-
빗방울
2026.10.30 20:49
콘솔 에러 뜬 거 보면 진짜 당황스러웠겠네요ㅋㅋ
그냥 변수 바꾸는 거랑 state 바꾸는 게 달라서 그래요.
setCount 쓰고 나면 바로 해결될 듯요
-
빗방울
2026.10.30 21:14
ㄹㅇ 처음에 constant 에러 뜨면 뇌정지 오죠ㅋㅋ
setCount만 제대로 쓰면 바로 해결될 듯요
-
빗방울
2026.10.30 21:33
ㄹㅇㅋㅋ 처음에 이거 모르면 한 시간 동안 let만 붙잡고 있게 됨요ㅋㅋ 그냥 setCount 쓰면 바로 해결될 듯요
-
빗방울
2026.10.30 21:42
ㄹㅇㅋㅋ 처음엔 다들 겪는 과정이라 그냥 슥 읽고 넘어가면 될 듯요ㅋㅋ
모든 이야기1455
가벼운 안부부터 깊은 생각까지, 함께 나눠요.
setCount(count + 1) 이렇게 써보세요ㅋㅋ 리액트는 상태 변경 함수를 써야 리렌더링이 돼서 화면이 바뀜요.