대규모 데이터셋 렌더링 최적화

[Dolphin-PC]

• [x] 대규모 데이터셋 렌더링 최적화:

  • windowing 기법으로 가상 리스트 구현하고 최적화 하기
  • 선택하여 진행 : https://github.com/bvaughn/react-window / https://github.com/bvaughn/react-virtualized

  • windowing 기법이란

    바로 목록을 가상화하는 'windowing' 기법이다.

    사용자에게 실제로 보이지 않는 컴포넌트는 렌더링하지 않고 영역만 차지하고 있다가 스크롤이되면 그 스크롤 위치에 있는 컴포넌트만 렌더링하여 보여주는 방식이다.

    react 공식 문서에서도 긴 목록을 렌더링하는 경우 windowing 기법을 사용할 것을 추천하고 있고, 대표적인 windowing 라이브러리로는 [react-window](https://github.com/bvaughn/react-window), [react-virtualized](https://github.com/bvaughn/react-virtualized)가 있다.

[Dolphin-PC]

• react-window vs react-virtualized
  • react-window 선택, 라이브러리 개발자가 언급한 내용에서, react-virtualized는 버전 업이 되가면서 많은 기능을 포함하게 되었고, 이를 다이어트하는 것이 매우 힘들었다고 한다.
  • 이에 나온 것이 react-window로, 필수기능만을 사용한다면, react-window를 추천한다고 한다.

[Dolphin-PC]

문제,어려움 상황

1. Flex 속성 안됨

• react-window 내 요소들은 position: absolute 로 지정되어, grid, flex 속성이 되지 않음

이 때문에, flex-gap 이 적용이 안됨

2. AutoSizer 의 존재 의문

• react-window는 absolute로 요소를 관리하기 떄문에, width와 height를 px 값으로 지정해주어야 한다.
• 이에 반응형으로 대처하고자 한 것이 AutoSizer인데, 부모 요소의 크기에 따라간다고 한다.

  결국 부모요소의 크기를 따라가게 된다면, 이를 사용하는 의미가 있을까...?

3. InfiniteLoader 의 loadMoreItems 함수가 실행되는 조건

InfiniteLoader가 하는 역할이 뭔지 모르겠음

• Infinite Scroll을 위한 것인지, windowing에 의해 렌더링되는 순간을 조절하기 위한 것인지 모르겠음 loadMoreItems함수가 실행되는 조건을 모르겠음
• 관련 글 을 보면, loadMoreItems함수를 통해 다음 페이지의 데이터를 불러온다는데, 이 함수가 실행되는 조건을 모르겠음

[Dolphin-PC]

해결 : https://dolphin-pc.notion.site/react-window-41289d25da9a42c4bab241166d760a6d?pvs=4