React 상태 관리가 꼬였을 때 확인하는 순서

React에서 상태 문제가 생기면 보통 어느 파일이 문제인지 부터 헷갈린다. 중요한 건 프론트엔드 UX 전체 흐름을 따라가면서 한 단계씩 확인하는 것이다.

사용자가 보는 증상부터 기록하기

React 쪽 문제는 화면만 보면 놓치는 값이 많다. 로그, 응답, 설정 중 하나를 증거로 잡아야 다음으로 봐야 할 범위가 줄어든다.

모바일에서도 확인해보기

바로 수정하기 전에 모바일 화면부터 확인하면 불필요한 변경을 줄일 수 있다. 작은 확인이 쌓이면 원인 후보가 자연스럽게 줄어난다.

• 먼저 볼 값: 모바일 화면
• 비교할 값: 정상 상태의 프론트엔드 UX
• 남겨둘 기록: 명령 출력, 응답 코드, 수정한 설정

이벤트 흐름 확인하기

프론트엔드는 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 적어두면 원인 추적이 쉬워진다.

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

수정 전에 고정할 값 정하기

정상 상태를 먼저 정해두는 게 좋다. 그래야 렌더링이 바뀌는 조건을 빠르게 판단할 수 있다.

확인 체크리스트

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

운영하면서 배운 것

상태 주변 문제가 반복되면 확인 순서를 고정해두는 편이 낫다. 감으로 접근하면 같은 실수를 반복한다. 결과가 바뀐 이유를 로그와 응답으로 설명할 수 있으면 충분히 정리된 것이다.