React 버튼 상태를 안전하게 바꾸는 법

React에서 버튼 비활성화 상태를 수정할 때, 로컬과 배포 환경의 동작이 다르면 당황하게 된다. 문제의 경계를 명확히 해 두면, 훨씬 쉽게 대응할 수 있다.

문제의 경계를 정하기

버튼 관련 문제가 반복된다면, 확인 순서를 고정해 두는 편이 낫다. 매번 다르게 접근하면 같은 실수를 반복하게 된다.

프론트엔드 흐름을 전체적으로 보기

UX의 흐름을 먼저 끊어서 본다. 특히 이벤트 흐름이 애매하면, 다른 부분을 고쳐도 결과가 안 바뀐다.

• 먼저 볼 값: 이벤트 흐름
• 같이 비교할 값: 정상 상태의 프론트엔드 동작
• 남겨둘 기록: 빌드 명령어, 에러 코드, 수정 내역

빌드하고 실제로 테스트하기

타입 체크만으로는 부족하다. 실제 브라우저에서 어떻게 동작하는지 봐야 한다.

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

특히 모바일 화면에서 버튼이 제대로 반응하는지 확인하자.

응답이 정상인지 확인하기

화면에는 활성화되어 보이지만, 실제로는 요청이 안 가는 경우도 있다. 브라우저 개발자 도구에서 네트워크 탭을 열고 확인해 보자.

모바일 화면은 따로 확인하기

데스크톱에서는 정상인데 모바일에서 깨지는 경우가 있다. 특히 터치 이벤트와 클릭 이벤트의 차이를 주의하자.

위험한 수정은 피하자. 하나씩 작게 바꾸면서 테스트하면, 문제가 생겼을 때 어디가 원인인지 명확해진다.

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해 본다.
3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

체크리스트 만들기

매번 같은 순서로 확인하면, 놓치는 게 줄어든다. 마지막에는 실제 화면이나 공개 URL까지 확인해야 작업이 완료된 것이다. 관련 기록을 남겨 두면, 다음에 비슷한 변경을 할 때 시간을 많이 아낄 수 있다.