React 상태 관리가 배포 후에만 실패할 때

로컬에서 완벽하게 작동하는 React 상태 관리가 배포되면 갑자기 실패하는 경험은 흔하다. 이때는 배포 환경과 개발 환경의 차이를 의심해야 한다.

핵심은 상태 변화 자체보다 그 상태가 렌더링으로 제대로 반영되는지 확인하는 것이다. 상태가 바뀌었어도 화면에는 아무것도 나타나지 않을 수 있다.

상태 변화가 실제로 일어나는가

먼저 상태가 변경되는 시점을 정확히 파악해야 한다. 로컬에서는 개발자 도구의 React DevTools로 상태 변화를 실시간으로 확인할 수 있다. 하지만 배포 환경에서는 프로덕션 빌드의 최적화로 인해 예상과 다르게 작동할 수 있다.

모바일에서는 작동하지 않을 수도

특히 모바일 환경에서만 상태 관리가 실패한다면, 이벤트 흐름이 다를 수 있다. 터치 이벤트와 클릭 이벤트는 서로 다르게 처리될 수 있으며, 키보드 입력 흐름도 데스크톱과 모바일에서 차이가 난다.

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

프로덕션 빌드로 실제로 테스트해보는 것이 중요하다.

전역 상태와 지역 상태의 충돌

혼자 개발할 때는 작은 부분만 신경 쓰기 쉽다. 하지만 배포되면 여러 컴포넌트가 동시에 상태를 읽고 쓸 수 있다. 전역 상태 관리 라이브러리를 쓴다면, 그 라이브러리의 초기화 순서도 중요하다.

수정 전에 현재 상태를 기록하기

상태 주변 문제가 반복된다면 확인 순서를 정해두는 게 좋다. 매번 감으로 접근하면 같은 실수를 반복하게 된다.

1. 로컬에서 npm run build를 실행하고 프로덕션 결과를 확인한다
2. 모바일 환경에서 실제로 상태 변화를 테스트한다
3. 브라우저 콘솔에서 상태 변화 로그를 확인한다
4. 이전에 작동하던 상태 관리 코드와 현재 코드를 비교한다
5. 한 가지씩만 수정해보고 매번 결과를 기록한다

작은 확인을 남겨두면 다음 문제를 훨씬 짧게 처리할 수 있다. 이번 수정이 상태 관리에 어떤 영향을 줬는지 명확히 알 수 있으면 충분하다.