목록 렌더링 성능 문제, 초보자가 자주 놓치는 부분

목록 렌더링은 생각보다 복잡하다. 처음부터 정답을 맞히려고 하다 보면 오히려 확인 시간이 길어진다.

초보자가 놓치기 쉬운 부분은 의외로 간단한데, 한 번 빠트리면 찾기가 정말 어렵다.

목록이 제대로 렌더링되지 않는 원인 찾기

목록 문제는 보통 세 가지 중 하나다. 첫 번째는 key prop을 빠뜨리거나 잘못 설정한 것이고, 두 번째는 상태 업데이트가 제대로 안 되는 것, 세 번째는 필터링이나 정렬 로직이 잘못된 것이다.

먼저 봐야 할 것:

• 사용자가 보는 목록 화면: 중복이 있는지, 누락이 있는지
• 정상일 때의 목록 상태: 몇 개 항목이 나와야 하는지
• 마지막으로 수정한 코드: 렌더링 함수와 상태 업데이트 부분

개발자 도구로 실제 문제 확인하기

화면만 보고 판단하면 놓치는 정보가 많다. React DevTools를 켜서 컴포넌트 트리를 확인해봐야 한다.

npm run build
# 브라우저 개발자 도구에서 렌더링 횟수와 props를 확인한다

각 항목의 key 값이 정말 고유한지 확인해보자. index를 key로 쓰면 목록이 재정렬될 때 버그가 생긴다.

성능 문제와 논리 오류를 구분하기

목록이 느려진 건 성능 문제일 수도, 논리 오류일 수도 있다.

1. 같은 조건에서 증상이 다시 나오는지 확인한다.
2. 로그를 보고 뭐가 달라졌는지 정리한다.
3. 배포된 화면, 콘솔 에러, 개발자 도구의 렌더링 정보를 확인한다.

정리하며

목록 렌더링은 한 번에 여러 부분을 수정하지 않는 게 가장 중요하다. 어느 부분이 문제인지 명확하게 한 후에 수정하자.