hatchling13
commented
1 month ago 익숙한 느낌이라 어디서 맨 처음 봤더라 했는데, 안드로이드 잠깐 만질 때 봤던 RecyclerView가 약간 비슷한 개념이라 그렇게 느꼈던 것 같습니다! 찾다보니 이런 글을 발견했는데요, 간단히 요약하자면 windowing은 아이템이 실제로 보이는지 여부를 알아내서 추가 또는 삭제하는 기법이고, recycling은 컨테이너를 삭제하는 대신 잠시 냅뒀다가 데이터만 바꿔서 재활용하는 기법이라고 합니다. 브라우저 환경에서는 DOM 노드가 하나의 아이템 단위가 될 테고, 뷰포트 내에 진입하느냐 마느냐를 통해 가시 여부를 판단할 수 있겠죠.
이전에 가져와주셨던 글(#7)에서도 같은 내용을 다루고 있는데, 넓은 의미로 위와 같은 동작들을 아울러 지칭하는 용어로 리스트 가상화라고 부르는 모양입니다. 자원이 넉넉하지 못했던 모바일 진영에서는 의외로 예전부터 관련된 기법을 많이 다루고 있었던 모양인데(RecyclerView: 2014년 11월 등장, UICollectionView: 2014년 2월 등장), 그 덕분인지 React Native에서는 릴리스 초기부터 관련 컴포넌트를 지원하고 있더라구요.
마지막으로, 댓글 달려고 자료 찾다가 알게된 라이브러리 하나 던지고 가겠습니다ㅋㅋ Tanstack 여기는 진짜 별거 많이 하네용... 솔직히 첨에 봤을때 뭐하는 도구인지 몰라서 쓱 넘겼는데 덕분에 찾아보게 되었습니다!
FE 성능개선기 1부: 주문하기
성능 개선 포스트를 가져왔어요! 이미지 지연 로딩은 자주사용되는 기법인데
windowing이라는 기법은 처음 봐서 흥미롭네용