React 상태 버그 확인하는 순서

React에서 상태가 흔들릴 때는 답을 먼저 맞히려다 보면 시간을 낭비한다. 먼저 화면에서 무엇이 다르게 보이는지, 그리고 로그에서 어떤 값이 바뀌었는지 정확히 기록해두는 게 빠르다.

먼저 정상 상태를 고정해두기

문제가 나는 전에 정상이었을 때의 상태를 기억해야 한다. 화면이 어떻게 보였고, 브라우저 개발자도구에서 상태 값은 무엇이었고, 네트워크 응답은 어떤 형태였는지. 이 세 가지를 짝지어 두면 변경 전후를 명확하게 비교할 수 있다.

재현 조건 좁혀서 기록하기

언제 증상이 나타나는지가 중요하다. "가끔 안 보인다" 같은 설명은 나중에 아무 도움이 안 된다. 대신 "특정 폭의 모바일 화면에서만 버튼이 안 보인다" 또는 "키보드로 입력 후 Enter 키를 눌렀을 때만 리렌더링이 안 된다" 같은 구체적인 조건을 남겨둔다.

npm run build
# 로컬 브라우저에서 320px ~ 768px 폭으로 순회하며 UI 재점검

상태와 렌더링 분리해서 보기

상태 값이 제대로 업데이트되는지와 화면이 제대로 리렌더링되는지는 별개 문제다. 한쪽이 맞다고 다른 쪽도 맞는 건 아니다. 브라우저 개발자도구의 React DevTools를 켜서 상태 트리를 확인하고, 동시에 화면을 보면서 둘이 일치하는지 체크한다.

로컬과 운영 환경에서 다르게 나타나면

로컬에서는 잘 작동하는데 배포한 환경에서 문제가 나타나면, 환경 변수부터 확인해야 한다. API 엔드포인트가 다른지, 캐시 정책이 다른지, 번들 최적화 과정에서 뭔가 빠진 게 없는지. 로그에 환경 정보를 붙여두면 다음 디버깅이 훨씬 수월하다.

작은 변경을 한 번에 하나씩

상태 이름을 바꾸고 컴포넌트 구조를 뜯어 고치고 이벤트 핸들러를 다시 작성하는 식으로 여러 개를 한 번에 수정하면 뭐가 실제 원인인지 알 수 없다. 한 가지만 고치고 결과를 본 다음, 다시 원상복구했다가 다른 한 가지를 시도한다. 이 과정을 기록해두면 같은 버그가 나중에 재발할 때 진짜 빨리 푼다.