React · 23 긴 목록의 표시 범위
단계: 성능 검증과 통합 편집기 · 편집 가능한 예제 · 저장 ID: react-step-23
목표와 학습 후 역량
- DOM 카드 행이 50개 이하이다.
- 필터 변경 후 빈 잘못된 페이지에 머무르지 않는다.
선수 지식
23단위는 22단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
DOM 비용
많은 행은 React 계산뿐 아니라 레이아웃과 DOM 메모리를 늘립니다. 화면에 필요한 범위를 제한하면 다른 비용도 바뀝니다.
페이지와 접근성
페이지 나누기는 구현과 키보드 탐색을 단순하게 유지합니다. 항목 수와 현재 범위를 알려 사용자가 위치를 파악하게 합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/PagedList.jsx에 페이지당 50개와 이전·다음 버튼을 구현하세요.
- 1000개 카드를 필터링한 뒤 slice하고 전체 결과 수를 표시하세요.
- 마지막 페이지에서 필터를 바꿔 현재 페이지를 유효 범위로 조정하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 페이지 크기 | 1000개 | 50개 | DOM 행 수가 최대 50개로 줄고 전체 결과 수는 유지된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- DOM 카드 행이 50개 이하이다.
- 필터 변경 후 빈 잘못된 페이지에 머무르지 않는다.
자가 점검
- 필터보다 slice를 먼저 하면 결과가 어떻게 달라지나요?
- 가상 스크롤에서 키보드 탐색이 어려운 이유는 무엇인가요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 측정한 경로만 메모하기 · 다음: 이벤트 경계와 접근 가능한 선택