React 목록 렌더링이 이상할 때 확인 순서

React 목록이 제대로 안 나타나면 먼저 느끼는 감정이 "왜 이렇게 복잡한가"다. 하지만 차근차근 따라가보면 대부분 key 속성 문제거나 렌더링 타이밍 문제다.

정상 상태를 화면에 표시해두기

목록이 제대로 렌더링될 때의 상태를 스크린샷으로 남겨두자. 데이터는 몇 개인지, 각 항목의 모양은 어떤지, 정렬 순서는 무엇인지. 이 기준점을 가지고 있으면 뭐가 달라졌을 때 바로 알 수 있다.

Key 속성부터 확인하기

배열의 인덱스를 key로 쓰는 건 아닌지? 아이템의 고유 ID가 있다면 그걸 key로 써야 한다. 인덱스를 key로 쓰면 배열 순서가 바뀔 때 컴포넌트 상태가 섞이는 버그가 생긴다.

# 로컬 개발 서버 시작
npm run build

# React DevTools에서 각 목록 항목의 key가 제대로 부여되었는지 확인

목록의 각 항목이 독립적인지 확인하기

목록의 한 항목을 클릭해서 상태를 바꿨을 때, 다른 항목들은 영향을 받지 않아야 한다. 부모에서 목록 전체 상태를 관리하면서 하나를 바꿀 때 전체가 리렌더링되는 건 아닌지 확인해보자.

데이터 정렬과 필터링이 의도대로 되는지 보기

목록을 가져온 후 정렬하고 필터링하는 로직이 있다면, 각 단계에서 데이터 상태를 콘솔에 출력해보자. 정렬은 제대로 되는데 필터링이 빠진 건 아닌지, 아니면 그 반대인지 명확히 파악할 수 있다.

목록이 비어 있을 때의 UI

데이터가 없을 때의 UI를 따로 준비했는지 확인해야 한다. 로딩 중일 때, 데이터 없을 때, 에러 발생했을 때 각각 다른 화면을 보여주는 게 맞다. 데이터 로딩이 끝날 때까지 아무것도 안 보이는 건 사용자 입장에서 버그처럼 느껴진다.

큰 목록은 가상화 고려하기

목록이 매우 크면 (예: 1000개 이상 항목) DOM에 모든 항목을 렌더링하는 것 자체가 성능 문제가 될 수 있다. 화면에 보이는 부분만 렌더링하는 가상화 라이브러리(react-window, react-virtual 등)를 사용하는 것을 고려하자.