windowing 기법 또는 list virtualization 기법을 적용해 무한 스크롤 성능을 최적화하기 위해 tanstack의 react-virtual 라이브러리를 사용하면서 위의 YouTube 클립의 도움을 많이 받았다. 위의 클립에서 faker-js로 랜덤한 길이를 가진 문장을 리스트로 만들어 virtualization을 통해 최적화하는 구현 방법을 코드로 옮겨 보았다. 랜덤한 길이를 가졌기 때문에 리스트 아이템의 height가 일정하지 않다. 즉 dynamic height를 가진 아이템을 구현하는 방법이다.
먼저 virtual을 적용하기 전 코드이다. 10만 개가 아니라 100만 개의 아이템을 렌더링한다면? 어지간히 성능 좋은 컴퓨터에서도 100만개를 렌더링하는 순간 브라우저가 죽어버릴 것이다. (저사양 컴퓨터에서는 10만 개도 쉽지 않다.)
위의 코드를 간략하게 설명해 보면,
1. useVirtualizer hook을 import 한다.
2. 스크롤할 전체 컨테이너에 parentElement를 ref로 연결해 준다.
3. useVirtualizer hook을 호출하여 virtualizer 인스턴스를 생성한다. 이때 count, getScrollElement, estimateSize 등 세 가지 옵션은 필수로 지정해야 한다.
4. 스크롤할 요소 안에 outer 컨테이너와 inner 컨테이너 요소를 추가한다. outer 컨테이너의 height는 전체 아이템의 height를, inner 컨테이너에서는 화면에 보이는 첫번째 요소의 픽셀만큼 아래로 밀어준다.
5. virtualizaer 인스턴스의 메소드 getVirtualItems를 사용해 뷰포트 안에 보이는 아이템만 렌더링한다.
a. measureElement 메소드를 아이템 요소의 ref와 연결해 dynamic height를 측정하게 한다.
b. data-index 속성을 지정해준다.
개발자 도구를 열어보면 10만 개 아이템 중에서 화면에 보이는 아이템만 DOM tree에 들어와 있는 모습을 확인할 수 있다. (data-index 9에서 14까지 총 6개 아이템)
위의 데모 코드를 확인할 수 있는 GitHub 레포지토리 링크:
'배워서 남 주자' 카테고리의 다른 글
| 상세 페이지에서 뒤로가기 클릭시 원래 있던 목록 페이지로 돌아가기 (0) | 2024.04.23 |
|---|---|
| JSX에서 null, false, React.Fragment의 차이 (0) | 2024.04.20 |
| 디자인 패턴 - Command 패턴 (0) | 2024.01.22 |
| 디자인 패턴 - Mediator/Middleware 패턴 (0) | 2024.01.08 |
| 디자인 패턴 - Observer 패턴 (0) | 2023.12.24 |