[NEXTFLIX_Day3] 페이지네이션(1) - 기능 파악

카테고리별 영화 상세페이지에서 페이지네이션을 구현하려고 한다.

추후에 어떻게 활용될지 모르니, 기능을 구현하기까지의 트러블 슈팅을 자세히 기록하고자 한다.

이번 글에는 잘못된 방향성으로 구현했을 때의 문제점을 기록했으며 최종 방법은 2편에서 확인할 수 있다.

 

[NEXTFLIX_Day3] 페이지네이션(2) - 동적 라우팅 작동 방식

 

---

페이지네이션이란?

콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소

 

 

페이지네이션 버튼의 기능

TMDB API는 페이지별로 엔드포인트를 다르게 주어 영화 데이터를 제공한다.
예) Now-playing API 엔드포인트 : ‘https://api.themoviedb.org/3/movie/now_playing?language=ko&page=1&region=KR’

 

🤔쿼리 파라미터로 이루어진 엔드포인트이기 때문에 'page 값을 queryParams로 설정해야 하나?' 하는 생각이 들었다.

 

📍구현하고자 하는 페이지네이션 버튼의 기능

• 기능 1 : Page = 1 기본값
• 기능 2 : 버튼 클릭 마다 -1 / +1
• 기능 3 : 첫 페이지 : ‘이전’ 버튼 비활성화 / 마지막 페이지: ‘다음’ 버튼 비활성화

 

동작 방식에 따른 구현 방법

• 페이지네이션 버튼 클릭 시 새로운 요청 함수 실행
• 함수 작동 방식 : ‘page = 1’ 쿼리파라미터의 값을 동적으로 변동하기
  • page를 state로 주어 변동 시 리렌더링?
  • Link 태그로 두어 쿼리 파라미터의 값을 +1 / -1 하여 이동?
  • Form 태그 내부에 두어 버튼 온클릭 시 쿼리 파라미터의 값을 증/감소 시키는 submit 함수?

셋 중 어느 방식이 적합할까?

이는 페이지네이션 동작 방식에 따라 달라진다.

 

1. useState로 page 값을 관리하고 리렌더링 (SPA 방식)

• 방법
  • page를 useState로 관리하고, setPage(page + 1) 같은 방식으로 변경
  • useEffect를 사용해 page가 변경될 때마다 API 요청
• 장점
  • 빠른 렌더링 (페이지 이동 없이 UI 업데이트)
  • 백 버튼을 눌렀을 때 상태 유지 가능 (추가적인 상태 관리 필요)
  • 별도의 URL 변경 없이 내부 상태로 관리 가능
• 단점
  • URL에 page 정보가 없어서 공유 불가능
  • 사용자가 새로고침하면 page 값이 초기화됨
• 언제 적합한가?
  👉🏻 앱 내부에서만 동작하는 페이지네이션 (예: 무한 스크롤, 리스트 UI에서 간단한 페이징)

 

2. Link 태그를 사용하여 queryParams 변경 (SSR/SEO 최적화)

• 방법
  • ?page=2와 같은 URL 구조를 만들고 useSearchParams 또는 window.location.search로 page 값을 가져와 사용
  • <Link to="?page=2"> 와 같은 방식으로 페이지 이동
• 장점
  • URL에page정보가 있어서 공유 가능
  • SSR (서버사이드 렌더링) 환경에서 적합
  • 새로고침해도 page정보 유지됨
• 단점
  • 페이지 이동 시 전체 리렌더링 발생 가능
  • API 요청이 많아질 수도 있음 (이전 데이터 유지하려면 캐싱 필요)
• 언제 적합한가?
  👉🏻 페이지네이션된 데이터를 URL로 공유해야 할 때 (예: 검색 결과 페이지, 블로그 리스트)

 

3. Form 태그 + submit으로 페이지 이동 (전통적인 방식)

• 방법
  • input(hidden)에 page 값을 넣고 submit 시 새로운 GET 요청
  • ?page=2와 같은 URL 구조를 만들어 백엔드에서 처리
• 장점
  • 백엔드 중심의 페이지네이션에 적합
  • 기본적인 HTML 동작을 사용하므로 추가적인 자바스크립트 코드 필요 없음
• 단점
  • 클라이언트 사이드에서 동적인 페이지 전환이 어려움
  • 페이지 이동 시 전체 새로고침 발생
• 언제 적합한가?
  👉🏻 SSR 기반 웹사이트에서 전통적인 페이지네이션을 구현할 때 (예: Django, Spring 기반 서버 렌더링)

내가 선택한 방식 : 1 + 2

• useSearchParams를 활용해 page 값을 URL에서 읽고, (잘못됨 : 하단 설명)
• useEffect로 page가 변경될 때 API 요청
• Link나 navigate를 활용해 URL을 업데이트

 

 

🚨usequeryParams의 문제점

위의 방법을 사용하여 페이지네이션 '다음' 버튼을 눌렀더니 오류가 생겼다.

페이지의 URL이 

http://localhost:3000/category/now-playing
👇🏻
http://localhost:3000/category/page=2

와 같이 변경되며 not found 페이지가 나타났다.

 

API의 엔드포인트의 'page=' 값이 변경되길 기대했지만 현재 페이지의 url이 수정된 것이다.

'useSearchParams를 활용하여 page 값을 URL에서 읽고' 👉🏻 이 부분에서 오류가 있다.

 

이 방식은 현재 페이지 링크의 값을 가져온다.

서버 컴포넌트에서 searchParams는 URL의 쿼리 파라미터를 담고 있다.
예를 들어, URL이 https://example.com/now-playing?page=2 일 때, searchParams.page는 "2"라는 값을 가진다.

 

 

내가 기대한 바로 동작하기 위해서는 URL 구조가 유지되면서 페이지 번호만 변경되어야 했다.

http://localhost:3000/category/now-playing/2
http://localhost:3000/category/now-playing/3

 

그러기 위해서는 동적 라우팅 구조로 변경하는 것이 적합해보인다.

 

 

---

• 추가 탐구 내용
  • 동적 라우트로 파일 구조를 두었을 때, 흐름 및 로직 구성 방식?
  • 페이지와 버튼의 관계?