React 상태 관리가 꼬였을 때 풀기

React에서 상태 문제는 보통 상태 이름, 업데이트 로직, 의존성 배열이 얽혀 있다. 처음부터 정답을 맞히려고 하면 확인 시간이 오히려 길어진다.

상태의 한 줄 요약

이 상태는 정확히 뭘 나타내는가. 사용자가 입력한 값인가, 서버에서 받은 값인가, 아니면 UI 상태(열림/닫힘 같은)인가. 상태가 뭘 나타내는지 명확할수록 문제를 추적하기 쉬워진다.

먼저 볼 파일

상태를 정의한 파일부터 본다. 상태 초기값이 맞는가. 상태를 업데이트하는 함수가 여러 개인가, 하나인가. 하나라면 그 함수에서 뭘 하는지 추적하기 쉽다. 여러 개라면 어느 함수가 상태를 바꾸고 있는지부터 정확히 파악한다.

이벤트 흐름 확인

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

상태가 언제 업데이트되는가. 사용자가 버튼을 클릭할 때인가, API 응답을 받을 때인가, 페이지가 로드될 때인가. 각 시점마다 상태 값이 뭔지 확인한다. 브라우저 개발자 도구의 React DevTools를 쓰면 상태 변화를 실시간으로 볼 수 있다.

서버에서 볼 값

서버에서 받은 값과 React 상태로 변환된 값이 일치하는가. API 응답과 화면에 보이는 값이 다르다면, 상태 변환 로직에 문제가 있을 가능성이 크다.

모바일에서 재확인

데스크톱에서는 상태가 제대로 작동하는데 모바일에서는 이상할 수도 있다. 터치 이벤트와 클릭 이벤트가 다르게 처리될 수 있기 때문이다.

최종 체크

수정한 부분을 다시 보고, 같은 상태 이름을 다른 곳에서도 쓰는가를 확인한다. 이 상태가 여러 컴포넌트에서 공유된다면, 한 곳의 수정이 다른 곳에 영향을 미칠 수 있다.