긴 리스트 형태의 컴포넌트 렉 없이 보여주기

그런 경우 “리스트 가상화” 기술을 사용합니다. 짧게 요약하면 눈에 보이는 아이템만 실제로 그리고, 나머지 아이템은 그리지 않는 방식입니다. 아이템의 높이가 다 같은 경우를 예로 들면, 아이템의 개수를 알고 있으니 전체 높이를 알 수 있고, 그래서 스크롤한 높이를 바탕으로 현재 몇개가 렌더링 되어야하는지 알 수 있습니다. 스크롤하면 이 값이 업데이트 되고요. 그래서 모바일 트위터 같은걸 보시면 아주 빠르게 스크롤하면 흰화면이 보였다가 라이템이 렌더링됩니다(데스크탑은 리스트 가상화를 사용하지 않습니다) 다만 실제로 사용할 때는 좀 더 복잡할 수 있는데요. 예를 들어 스크롤 최적화를 위해 overscan을 적절히 잡는거나 아이템의 높이가 다 다른 경우가 있겠죠. 하지만 기본적인 원리는 같습니다. 참고로 안드로이드의 Recycler View등 네이티브 리스트도 비슷한 발싱으로 최적화 합니다. 더 알아 보고 싶으시면 아래 글을 추천드리고 라이브러리는 react-window, react-virtuoso 등을 추천드립니더 (개인적으로는 react-virtuoso를 선호합니다) react-virtualized가 가장 오래되고 유명하지만 해당 라이브러리는 더이상 유지되지 않고 같은저자가 react-window를 만들었어요. 기본적인 용법은 같으니 예제가 필요하시다면 참고해보세요. https://web.dev/i18n/ko/virtualize-long-lists-react-window/