React 상태 관리 배포 전 확인 체크리스트

혼자 개발할수록 확인한 값과 바꾼 값을 따로 남기는 습관이 필요하다. 프론트엔드 UX 전체 흐름에서 원인을 좁혀야 한다.

렌더링 조건부터 확인

React에서 상태 문제는 대부분 렌더링 조건의 미묘한 차이에서 비롯된다. 정상 상태를 먼저 정의하고, 그 기준에 맞는지 빠르게 판단할 수 있어야 한다.

먼저 볼 값: 이벤트 흐름

• 어떤 액션이 어느 순서로 트리거되나?
• 각 단계에서 상태가 예상한 대로 변하나?

로컬과 운영 환경 비교

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

같이 비교할 값: 정상일 때의 상태

• 로컬에서만 잘 동작하는 경우가 90%다.
• 환경 차이까지 함께 기록하면 원인 추적이 쉬워진다.

콘솔 로그로 추적하기

배포 전에 확인할 항목들:

• 명령 출력 (npm run 결과)
• 응답 코드 (브라우저 Network 탭)
• 수정한 설정 (환경변수, 컴포넌트 props)

배포 검증 단계

1. 원래 증상이 같은 조건에서 다시 나는지 재현한다.
2. 콘솔이나 응답에서 바뀐 부분을 한 줄로 설명할 수 있어야 한다.
3. 공개 URL에서 최종 확인을 한다.

기록 남기기

다음에 비슷한 문제가 나올 때를 대비해 어떤 값이 달라졌는지 기록해두자. 관련 기록을 짧게라도 남겨두면 다음 확인이 훨씬 빨라진다.