React 빈 상태 렌더링, 초보자가 자주 놓치는 버그

빈 상태를 제대로 처리하지 않으면 애플리케이션이 죽는다. 목록이 비었을 때, 에러가 났을 때, 로딩 중일 때를 모두 다르게 처리해야 한다.

운영 중에는 작은 이상 신호도 빨리 분리해서 봐야 한다. 빈 상태 버그는 특히 그렇다.

왜 빈 상태가 복잡한지 이해하기

빈 상태 처리는 생각보다 복잡하다. 데이터가 없는 건 맞는데, 이유가 여러 개다:

• 정말로 데이터가 없다 (빈 목록)
• 데이터를 아직 못 가져왔다 (로딩 중)
• 데이터를 가져오다가 에러가 났다

이 세 가지를 모두 다르게 표현해야 한다.

먼저 확인해야 할 것:

• UI 상태: 지금 화면에 뭐가 보이는지
• 기대하는 상태: 정상일 때 뭐가 보여야 하는지
• 상태 값: 현재 isLoading, error, data는 뭔지

재현 조건을 명확히 하기

React 문제는 화면만 보고 판단하면 놓치는 값이 많다.

npm run build
# 브라우저 개발자 도구에서 네트워크 탭을 켜고 재현한다

느린 네트워크에서 어떻게 보이는지, API 요청이 실패했을 때 어떻게 보이는지를 확인해야 한다. 로컬에서는 빠르지만 실제 서버는 느릴 수 있다.

상태 변화를 단계적으로 추적하기

빈 상태 버그를 찾으려면 이벤트 흐름을 먼저 끊어서 봐야 한다.

1. 원래 증상이 같은 조건에서 다시 나오는지 확인한다.
2. 로그를 보고 뭐가 다른지 정리한다.
3. 배포된 화면, 콘솔 에러, 네트워크 요청 상태를 확인한다.

정리하며

다음에 비슷한 증상이 나오면 먼저 현재 상태를 기록하고, 하나씩 비교하면 된다. 빈 상태 처리는 한 번 정리해두면 나중에 반복할 수 있다.