React 컴포넌트 props 변경, 배포 전 확인 순서

컴포넌트 props가 바뀌면 렌더링부터 확인하는 게 빠르다. 검색해서 들어온 문제라면 먼저 재현 조건을 명확히 해두는 편이 좋다.

핵심은 한 가지만 보지 않는 것이다. 화면만 봐서는 놓치는 값이 많다. 로그, 응답, 렌더링 조건을 함께 봐야 원인이 보인다.

먼저 재현 조건 고정하기

문제를 다시 만들 수 있는 조건을 먼저 정해두면 확인이 훨씬 빠르다. "어떤 상황에서 문제가 나는가"를 설명할 수 있는 상태부터 시작하자.

• 어떤 props가 바뀌었는가
• 그때 API 응답은 어떻게 다른가
• 컴포넌트는 어떻게 표시되는가

이벤트 흐름과 렌더링 조건 추적

props 변경이 컴포넌트에 어떻게 전달되는지 추적하자. 특히 부모에서 props로 받은 값이 상태로 저장되는 경우, 상태 갱신이 제때 일어나지 않으면 문제가 생긴다.

npm run build
# 브라우저에서 Network 탭과 React DevTools를 함께 본다

배포 환경과 로컬 비교

로컬에선 문제가 안 보이는데 배포 후 문제가 생긴다면, 환경 설정부터 확인하자. 캐시, 빌드 최적화, API 응답 속도 차이 등이 원인이 될 수 있다.

마지막 확인: 실제 화면

로그와 응답이 맞는지 확인했다면, 이제 실제 브라우저에서 다시 확인하자. 혹시 놓친 UI 상태나 에러 메시지가 없는지 살펴본다.

같은 문제가 반복되지 않으려면 언제 이런 증상이 나타나는지, 어떻게 고쳤는지 기록해두는 게 좋다.