미니 프로젝트) 간단한 무한 스크롤 구현하기

※ youtube의 코딩알려주는 누나 영상을 참고하였습니다 ! ※

 

1. 프로젝트 소개

간단하게 무한스크롤(Infinity-Scroll) 구현을 해보았습니다. 유튜브의 코딩알려주는누나의 영상을 참고하여 만들어 보았습니다.

영화 데이터를 기반으로 한 무한 스크롤 영화 리스트를 구현한 프로젝트입니다. React와 React Query를 활용하여 데이터를 불러오고, 사용자가 스크롤할 때마다 새로운 페이지를 불러오는 기능을 구현했습니다. 특히, useInfiniteQuery를 사용하여 페이지네이션을 처리하고, react-intersection-observer로 화면에 영화 목록이 보일 때마다 데이터를 추가로 불러오도록 했습니다.

2. 기술 스택 및 환경

• 사용한 기술: React, styled-components, React Query, MUI(Grid, Button), react-intersection-observer
• 개발 환경: VSCode

3. 프로젝트 기능 설명

• 핵심 기능:
  • 영화 목록을 무한 스크롤로 불러오며, 사용자가 화면을 스크롤할 때마다 새로운 영화 데이터가 자동으로 추가됩니다.
  • useInfiniteQuery를 사용해 API 호출과 데이터 페이지네이션을 관리합니다.
• UI/UX: 

영화 정보를 불러오는 화면 입니다.

• 각 영화는 이미지, 제목을 포함하며, MovieContainer와 MovieItem 컴포넌트로 스타일링되어 카드 형식으로 표시됩니다.
• react-intersection-observer를 이용해 마지막 항목이 화면에 보일 때마다 자동으로 다음 페이지를 불러옵니다.

4. 코드 설명

App.js

useGetTopRatedMovies.js

 

 

• App.js: 영화 데이터를 불러오는 useGetTopRatedMovies 훅을 사용하여 무한 스크롤을 구현합니다. MovieContainer와 MovieItem 컴포넌트를 통해 각 영화 항목을 렌더링하고, Grid를 이용해 레이아웃을 구성합니다.
• useGetTopRatedMovies.js: useInfiniteQuery를 사용하여 API에서 데이터를 불러오고, getNextPageParam을 설정하여 페이지네이션을 처리합니다. pageParam을 통해 페이지 번호를 관리하며, 마지막 페이지에 도달할 때까지 계속해서 데이터를 요청합니다.

 

5. 배운 점

• 학습한 내용: React Query를 사용하여 무한 스크롤 기능을 구현하는 방법과 Intersection Observer를 사용해 스크롤에 따라 데이터를 동적으로 불러오는 방법을 배웠습니다.
• 성장한 점: 무한 스크롤과 API 연동을 효율적으로 처리하며, React Query의 useInfiniteQuery 훅을 활용할 수 있게 되었습니다.

6. 향후 개선점 및 계획

• 개선할 점: 영화 카드에 더 많은 정보를 추가하거나, 사용자가 좋아하는 영화를 저장하는 기능을 추가할 계획입니다. 예를 들어, 영화에 대한 평가를 추가하거나 즐겨찾기 기능을 구현할 수 있습니다.
• 추가 기능: 로딩 중 상태를 표시하거나, 사용자가 스크롤을 끝까지 내리면 '더 이상 영화가 없습니다'라는 메시지를 표시하는 기능을 추가할 예정입니다.

7. 결론

• 정리: 이 프로젝트를 통해 React와 React Query를 활용한 무한 스크롤 기능을 완성했습니다. 이 경험은 API 연동과 비동기 데이터 처리에 대한 이해를 높이는 데 큰 도움이 되었습니다.

※ youtube의 코딩알려주는 누나 영상을 참고하였습니다 ! ※