React에서 빈 상태 처리 때문에 막힐 때

React 앱에서 '데이터가 없을 때'를 처리하는 건 생각보다 까다롭다. 로딩 중인 상태와 정말 데이터가 없는 상태를 구분해야 하고, 에러 상태도 따로 봐야 하기 때문이다.

빈 상태로 인한 버그는 보통 state 업데이트 순서나 렌더링 조건이 잘못되어 생긴다. 화면에 아무것도 안 뜨거나, 이상한 상태가 뜨게 되는 거다.

문제의 경계 파악하기

빈 상태 문제가 생기면 먼저 범위를 정해야 한다:

• 어느 컴포넌트에서 문제인가?
• state 초기값은 뭐인가?
• 렌더링 조건은 뭔가?

이 정보들로 범위를 좁혀야 한다.

로컬과 운영의 차이

로컬 개발 환경에서는 데이터가 있지만, 운영에서는 없을 수도 있다. 이런 경우에만 버그가 드러난다. 따라서 항상 빈 상태를 테스트해봐야 한다:

• 이벤트 흐름
• state 업데이트 순서
• 화면 렌더링 결과

이벤트 흐름 확인하기

빈 상태가 제대로 처리되려면, 어떤 순서로 이벤트가 발생하고 state가 업데이트되는지 명확해야 한다:

npm run build
# 브라우저에서 모바일 환경으로 테스트하고 이벤트 흐름을 확인한다

응답 확인하기

API에서 빈 응답(빈 배열이나 null)이 오는지 확인해보자. 이게 제대로 state에 반영되는가?

모바일 화면에서의 차이

데스크톱에서는 잘 보이지만 모바일에서는 이상할 수도 있다. 특히 빈 상태 UI가 모바일 폭에서 제대로 표시되는가를 확인해야 한다.

위험한 수정

빈 상태를 고치려고 여러 곳을 동시에 수정하면 안 된다. 한 번에 하나씩 변경하고, 각 단계마다 확인해야 한다.

1. 빈 상태가 같은 조건에서 다시 나는가?
2. 로그에서 뭐가 달라졌는가?
3. 실제 화면과 기대값을 비교했는가?

빈 상태 처리를 제대로 하면, 사용자 경험이 훨씬 좋아진다.