버튼 눌렀는데 숫자가 그대로예요 — state가 뭔가요?

AI한테 "카운터 버튼 만들어줘" 했는데, 버튼을 눌러도 화면 숫자가 안 바뀐 적 있으신가요. 콘솔 찍어보면 값은 분명 바뀌었는데, 화면만 그대로인 경우가 많습니다. 이럴 때 나오는 단어가 "state(상태)"입니다.

한 줄 정의

state는 "화면이 기억하고 있다가, 바뀌면 자기 자신을 다시 그려야 하는 값"입니다. 그냥 변수와 다른 점은, state가 바뀌면 화면이 자동으로 새로고침되듯 다시 렌더링된다는 것입니다.

왜 필요한가

일반 변수에 값을 넣으면 컴퓨터는 기억하지만, 화면은 그 사실을 모릅니다. 로그인 여부, 장바구니 개수, 입력창에 친 글자처럼 "바뀌면 화면도 같이 바뀌어야 하는 값"은 반드시 state로 관리해야 화면이 따라옵니다.

실전에서 이렇게

바이브코딩 중 "좋아요 버튼 누르면 숫자 올려줘"라고 시켰는데 숫자가 안 오르면, AI에게 "이 값 state로 관리 안 하고 그냥 변수로 처리한 것 같아요, state로 바꿔주세요"라고 말해보세요. 실제로 이 한 문장으로 해결되는 경우가 많습니다.

비유

state는 칠판, 일반 변수는 메모지라고 생각하면 됩니다. 메모지에 내용을 바꿔 적어도 아무도 안 보지만, 칠판(state)에 적힌 내용이 바뀌면 교실(화면) 전체가 그 칠판을 다시 쳐다봅니다.