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

로펀님은 강의 촬영이후에 수정하신 거 같던데, 그 스피너 도는 부분이 영화 리스트 출력하는 것보다 위에 있나 확인해보세요. 아마 강의대로만 쭉 따라했으면 위에 있을텐데, 스피너 컴포넌트를 영화 리스트 아래로 내리시면 해결될거에요

스크롤 관련 디테일은 두 가지 정도로 잡아볼 수 있을 것 같습니다.

1. 스크롤 내렸을 때 새롭게 추가된 아이템들에 맞게 스크롤 위치 변경

    

2. 무한스크롤을 하다가 다른 페이지를 방문한 후 돌아왔을 때 마지막으로 스크롤한 위치로 이동

1번 이슈의 경우 가상 리스트라는 개념을 도입하시면 더 우아한 무한 스크롤 개발이 가능합니다. 이 이슈에 대해서는 오늘의 집에서 정말 상세하게 정리해둔 글이 있으니 이 글을 참고해서 개발해보시면 좋은 연습이 될 것 같습니다 ㅎㅎ

https://www.bucketplace.com/post/2020-09-10-%EC%98%A4%EB%8A%98%EC%9D%98%EC%A7%91-%EB%82%B4-%EB%AC%B4%ED%95%9C%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B0%9C%EB%B0%9C%EA%B8%B0/

https://www.bucketplace.com/post/2024-09-11-virtualizedlist-%EB%AC%B4%ED%95%9C%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EA%B0%9C%EB%B0%9C-%EC%9D%B4%EC%95%BC%EA%B8%B0/

2번의 경우 local storage, session stroage등을 이용해서 기존에 스크롤 하던 위치를 기억할 수 있습니다. 아래 블로그에 hands-on 해보실 수 있는 자세한 내용이 나와있으니 참고 부탁드립니다.

https://minguri.tistory.com/29

안녕하세요, 인프런 AI 인턴입니다. He T (Tty)님.

무한 스크롤 기능을 구현할 때, 스크롤 위치가 초기화되는 문제는 종종 발생합니다. 이는 주로 새로운 페이지의 데이터를 불러올 때 기존 데이터를 잘못 처리하거나, 새로운 콘텐츠가 로드될 때 스크롤 오프셋이 계산되지 않는 경우에 발생할 수 있습니다. 이를 해결하기 위해서는 몇 가지 방법을 시도할 수 있습니다.

1. 페이지 데이터 관리: 무한 스크롤을 구현할 때, 기존 데이터를 유지하면서 새로운 페이지 데이터를 추가하는 방식으로 구현해야 합니다. useState 혹은 useReducer 등의 상태 관리 툴을 사용하여 데이터를 잘 관리하고 있는지 확인해보세요.

2. 스크롤 위치 추적: 새로운 데이터가 로드될 때 현재 스크롤 위치를 저장하고, 새로운 콘텐츠가 추가된 후에 해당 위치로 스크롤을 복원하는 방법도 효과적입니다.

3. Intersection Observer: 스크롤 이벤트 대신 Intersection Observer API를 사용하여 성능을 개선하는 방법도 고려해볼 수 있습니다. 이 방법은 뷰포트에 요소가 들어올 때 비동기적으로 데이터를 가져오는 데 유용합니다.

관련하여 도움이 될 만한 링크를 추천드립니다:

• 무한 스크롤 구현에 대한 기본 사례: 리액트와 Next.js로 무한 스크롤을 설정하는 방법에 대해 설명한 게시글을 참고하세요. 이 게시글에서는 페이지가 변경될 때 스크롤을 부드럽게 유지하는 방법도 다룹니다.
  

무한 스크롤 구현 시 위의 방법을 통해 문제를 해결할 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.