React 상태 문제로 반복되는 실수

React 개발하다 보면 같은 상태 문제를 자꾸 반복한다. 검색해서 들어온 상황이라면 바로 재현 조건부터 잡는 편이 빠르다.

상태 문제는 한 단어만 붙잡지 말고 프론트엔드 UX 전체 흐름에서 원인을 좁혀야 한다. 재현 조건, 로그, 응답처럼 눈으로 확인할 수 있는 값을 먼저 모아야 한다.

상태의 목표 명확히

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

React 상태 파악

렌더링 조건부터 확인해야 한다. 프론트엔드 UX 상태가 정상일 때를 먼저 정해두자.

• 먼저 볼 것: 렌더링 조건
• 비교할 값: 정상일 때의 상태
• 남길 기록: 명령어 출력, 오류 메시지, 수정한 설정

이벤트 흐름 확인

React 문제는 화면만 보고 판단하면 놓친다. 로그, 응답, 설정 중 하나를 증거로 잡아야 한다.

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

수정 순서

상태 자체보다 재현 가능한 단서를 남기는 게 중요하다. 에러 문구를 확인하면 다음으로 볼 범위가 확 줄어든다.

모바일 화면 확인

상태 주변 문제가 반복된다면 확인 순서를 고정해야 한다. 매번 느낌으로 접근하면 같은 실수를 반복한다.

확인 순서:

1. 같은 조건에서 증상이 다시 나오는지 테스트한다
2. 로그나 응답에서 달라진 부분을 설명한다
3. 공개 화면, 빌드 결과, 실제 요청으로 확인한다

다음 액션

작은 확인을 남겨두면 다음 문제를 훨씬 짧게 처리할 수 있다. 관련 기록을 남겨두면 다음 확인이 훨씬 빨라진다.