버튼을 눌러도 숫자가 안 바뀌어요 — state가 뭔가요?

AI한테 "버튼 누르면 숫자 1씩 올라가게 해줘"라고 시켰는데, 코드는 그럴듯해 보이는데 눌러도 화면이 그대로인 적 있나요?

대부분 원인은 "값은 바뀌었는데 화면이 그걸 모른다"예요. state라는 개념을 안 쓰고 그냥 값만 바꿔서 생기는 문제예요.

한 줄 정의

state(상태)는 화면이 "기억"하고 있다가, 값이 바뀌면 자동으로 다시 그려주는 데이터예요.

왜 필요한가

그냥 변수는 값이 바뀌어도 화면이 스스로 알아채지 못해요. "이거 바뀌었으니까 화면 다시 그려!"라고 알려주는 장치가 필요한데, 그 역할을 하는 게 state예요.

실전에서 이렇게

"좋아요 버튼 누르면 숫자 올라가게 해줘"라고 요청했을 때 AI가 만든 코드에 useState 같은 게 보이면, 그게 바로 state를 쓰고 있다는 뜻이에요. 눌러도 화면이 안 바뀐다고 하면 "이 값 state로 관리해줘"라고 콕 집어 요청하면 대부분 해결돼요.

비유

전광판 숫자판이라고 생각하면 쉬워요. 뒤에서 숫자만 바꿔놓고 전광판에 신호를 안 보내면 예전 숫자가 그대로 걸려있죠. state는 "값이 바뀌면 전광판에도 실시간으로 반영해주는 장치"예요.