React 버튼이 예기치 않게 비활성화될 때

React에서 버튼이 갑자기 비활성화되거나 클릭을 받지 않으면 답답한데, 대부분 상태 관리와 이벤트 흐름 중 하나에 문제가 있다. 화면만 봐서는 알 수 없으니 먼저 에러 콘솔과 state를 함께 확인해야 한다.

가장 먼저 확인할 것

브라우저 개발자 도구를 열고 콘솔을 본다. 에러 메시지가 있으면 그것부터 시작한다. 없다면 React DevTools로 해당 컴포넌트의 state를 확인해보자. disabled 상태가 true인지, 아니면 부모 컴포넌트에서 내려오는 props가 문제인지 확인한다.

버튼 클릭이 아예 반응이 없다면 이벤트 리스너 자체가 등록되지 않았을 가능성이 크다.

# 로컬 개발 서버가 HMR로 제대로 갱신됐는지 확인
npm run dev
# 브라우저 캐시 무시하고 새로고침 (Ctrl+Shift+R 또는 Cmd+Shift+R)

상태 흐름을 정확히 따라가기

버튼이 disabled 상태로 고정되면 대부분 다음 중 하나다:

1. 상태 초기화 누락: 컴포넌트가 마운트될 때 버튼 활성화 상태를 초기화하지 않음
2. 조건식 오류: disabled 조건이 항상 true를 반환
3. 부모-자식 상태 불일치: 부모에서 disabled props를 내려줬는데 자식에서 무시하는 경우

로컬과 배포 환경에서 다르게 보인다면 환경변수나 빌드 설정을 확인해야 한다.

재현 가능한 상태를 만들기

버튼 문제를 남에게 설명하거나 나중에 다시 보려면 "어느 화면에서, 어떤 동작 후에" 버튼이 비활성화되는지 정확히 기록해두는 게 중요하다.

1. 현재 상태를 스크린샷으로 남긴다
2. 콘솔 에러가 있다면 전체 스택트레이스를 복사한다
3. 수정 전에 문제를 재현할 수 있는 최소한의 단계를 정리해둔다

이렇게 해두면 같은 문제가 다시 나왔을 때 훨씬 빠르게 대응할 수 있다.