인프런 커뮤니티 질문&답변

최근 타 프로젝트에서 무한스크롤과 렌더링 성능 이슈를 해결하면서 React.memo와 react-virtualized, react-window 등의 방법을 찾아서 해결했었는데 그 때의 상황은 노드버드와 같이 같은 컴포넌트를 무한으로 렌더하는 상황이였습니다. 해결은 react-virtualized를 이용했었습니다.

이번 슬리액트강좌에도 무한스크롤이 있길래 잘 보니 날짜별로 묶어 표시하는 기능이 구현되어 있던데 어떻게 해야 적용이 될 지 감이 잘 안잡히네요.

뷰포트의 날짜 데이터를 감지해서 화면에 강제로 뿌리는 억지?스러운 방법 밖에 생각나지 않는데
단순히 같은 컴포넌트의 데이터를 렌더링 하는게 아니라 날짜별 섹션으로 묶어 표시하려고 하면
react-virtulized나 react-window는 적합하지 않은 라이브러리 선택일지,
깔끔한 방법이 있는데 제가 생각을 못하는 것인지 의견이 궁금해서 질문으로 남깁니다!

 

추가로 모바일이나 태블릿에서 사용 시 innerScroll이라고 해야하나, 화면 전체의 windowScroll?이 아닌 경우 상단을 터치하여 최상단으로 스크롤하는 기능이 먹지 않던데 엘리먼트의 스크롤을 화면 전체의 스크롤로 연동시키는 등의 방법으로 해결하신 경험이 있으시면 관련 내용도 슬쩍 공유해주시면 감사하겠습니다.,.