React 상태 초기화: 컴포넌트 리렌더링이 예상과 다를 때

이럴 때는 화면 하나만 보지 말고 로그와 응답을 같이 봐야 한다. 상태가 제대로 초기화되지 않으면 화면에는 영향이 없어 보여도 내부적으로 계속 문제가 남는다.

문제의 원인 파악

왜 헷갈리는지 먼저 명확히 하자. 초기 렌더링에서 상태가 틀린 건지, 업데이트 후에 틀린 건지, 특정 액션 후에만 틀린 건지 구분해야 한다.

local과 운영의 차이가 자주 숨어 있다. 환경 변수나 브라우저 캐시 때문에 원인 추적이 헷갈릴 수 있으니, 환경 차이까지 같이 적어두자.

재현 조건 정하기

먼저 에러 문구를 확인한다. 에러 메시지가 없다면 로그에 뭐가 나타나는지 본다. 작은 확인이 쌓이면 원인 후보가 자연스럽게 줄어든다.

• 어떤 값이 예상과 다른가?
• 정상일 때는 뭐였는가?
• 뭘 했을 때 달라졌는가?

이벤트 흐름 확인

컴포넌트의 재현 조건을 체크 포인트로 나눈다:

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

빌드가 성공하는지 먼저 확인한다. 빌드는 성공해도 runtime에서 상태 업데이트가 제대로 안 될 수 있다.

상태 이름과 렌더링 조건

상태 변수의 이름이 명확한지 확인하자. useState의 초기값이 제대로 설정되었는지, 상태 업데이트 함수가 올바르게 호출되는지 본다.

특히 상태가 객체나 배열이면, 불변성 때문에 실수하기 쉽다. 렌더링이 트리거되는 조건도 다시 한번 확인해보자.

모바일 화면 확인

모바일과 데스크톱에서 상태 초기화가 다르게 나타날 수 있다. 실제 화면에서 버튼을 눌렀을 때 상태가 변하는지 확인한다.

같은 증상이 다시 나타나는지도 중요하다. 매번 일어나면 원인이 명확한 것이고, 가끔만 일어나면 race condition 같은 타이밍 문제일 가능성이 있다.

정리

마지막에는 실제 화면이나 공개 URL까지 확인해야 작업이 끝난다. 로그와 응답에서 어떻게 달라졌는지 설명할 수 있으면 충분히 정리된 것이다.

비슷한 문제가 다시 생기면, 이번에 기록한 정보를 보면 훨씬 빠르게 대응할 수 있다.