앞선 포스팅에서 react-window 설치 방법과 간단한 List 구현에 대해 작성해 보았으니, 처음 이 글을 보는 경우, 앞선 포스팅을 참고 바란다.👉🏻 3) AutoSizer 활용기본적으로 List에 width와 height를 고정적으로 줘야하며, %로는 줄 수 없다. 하지만 반응형으로 구현되어야 하거나 정확한 px 사이즈를 줄 수 없는 경우가 있기에, 상위의 width나 height에 %의 값을 줘서 내부 List 쪽에 적용되도록 해야 하는데 이와 관련하여 AutoSizer를 활용해 볼 수 있다. 사용법은 다음과 같다.import { FixedSizeList as List } from "react-window";import AutoSizer from "react-virtualized-auto-..

👉🏻 사용하게 된 계기회사에서 진행하는 프로젝트의 대부분의 리스트가 무한 스크롤로 이루어져 있었다.무한스크롤은 스크롤을 내릴 때마다 Dom에 UI가 쌓이게 되는 구조인지라,스크롤을 내리면 내릴수록 UI들이 쌓이게 되어 프론트 단에서의 화면 처리를 고민하지 않을 수 없었다.그러다 화면 밖으로 나가는 UI 들은 보이지 않게끔 처리할 수 없는지에 대해 고민하게 되었고, 찾아보니 windowing 처리에 대한 라이브러리가 있어 사용한 경험을 공유하고자 한다. 👉🏻  react-window vs react-virtualizedwindowing 처리에 대해 검색을 하다보면 위 두 가지 라이브러리에 대한 글을 많이 찾아볼 수 있다. 필자는 두 개의 라이브러리 모두 다 써보았다.react-window는 reac..