React 상태 관리 디버깅, 혼자 할 때 빠르게 원인 찾기

혼자 개발하다 보면 상태 관리 문제는 정말 답답하다. 화면만 봐서는 에러가 뭔지 알 수 없고, 로그를 봐야 원인이 보인다.

내가 배운 핵심은 아무 생각 없이 빠르게 문제를 재현하는 것이다. 대충 흐름만 따라가다가는 놓치는 값이 한두 개가 아니다. 정상 상태를 먼저 정해두고 거기서부터 뭐가 달라지는지만 봐야 한다.

정상 상태를 먼저 고정하기

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

먼저 볼 값들:

• 에러 메시지나 콘솔 경고
• 예상하는 UI 상태와 실제 화면의 차이
• 마지막으로 수정한 코드 줄 하나하나

React 상태 변화를 추적하는 방법

문제는 화면만 보고 판단하면 잃는 정보가 많다는 것이다.

먼저, console.log로 상태 변화를 남긴다. 어디서 어떤 값으로 바뀌는지 순서를 기록하면 흐름이 보인다.

npm run build
# 브라우저 개발자 도구 Network탭에서 API 응답도 확인한다

컴포넌트 렌더링 횟수도 중요하다. React DevTools를 켜고 어느 컴포넌트가 몇 번 다시 렌더링되는지 보면 불필요한 재렌더링을 찾을 수 있다.

실제 상태와 기대한 상태 비교하기

상태 값이 애매하면 다른 부분을 아무리 수정해도 결과가 안 바뀐다. 특히 조건부 렌더링 부분은 상태 이름을 잘못 쓰는 경우가 많다.

1. 현재 증상이 같은 조건에서 다시 나는지 확인한다.
2. 로그에서 뭐가 달라졌는지 한 줄로 정리해본다.
3. 실제 배포된 화면에서도 같은 증상이 나는지 마지막으로 확인한다.

정리하며

혼자 개발할 때는 한 번에 여러 상태를 수정하지 않는 것이 가장 중요하다. 관련 기록을 남겨두면 다음 번 확인이 훨씬 빨라진다.