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

페이지네이션(1)에서 잘못된 searchParams의 사용으로 API 엔드포인트가 아닌 현재 페이지에 접근했다.

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

 

구현하고자 하는 방향에 맞는 방법인 '동적 라우트 구조'를 적용하며 작동 방식을 함께 정리해보고자 한다.

추가로 페이지와 버튼의 로직을 살펴보며 동작 흐름도 파악해본다.

---

페이지네이션 버튼의 기능

다시 짚어보는 버튼의 기능

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

 

Next.js의 동적 라우트 처리 방식

위와 같은 파일 구조는 동적으로 path 파라미터로 들어오는 값이 [ ] 안에 담기게 된다.

// app > api > category > now-playing > [page] > page.tsx

const nowPlayingPage = async ({ params }: { params: { page?: string } }) => {}

 

내부 페이지의 기본적인 구조이다.

즉, 

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

의 구조에서 /2 부분이 고정되지 않고 계속해서 변하는 값으로 들어오는 것이다.

그 값은 페이지 컴포넌트의 인자로 들어오게 된다.

 

그렇다면, 인자로는 내가 설정해 둔 page가 아닌 params가 들어오는 이유가 뭘까?

그건 Next.js 에서 정한 규칙과 연관이 있다.

 

넥스트에서는 [ ]와 같은 동적 세그먼트를 사용하면 해당 값이 자동적으로 params 객체 안에 들어간다.

Next.js 한글 문서 - 동적 라우팅

 

 

예를 들어, category/now-playing/[page] 경로에서 /category/now-playing/2로 접근하면
params = { page: "2" } 와 같은 형태로 담긴다.

따라서 params.page로 page 값에 접근할 수 있다.

 

 

왜 굳이 객체에 담는 걸까?

지금과 같은 단일 경로 외에 다중 경로가 적용될 때 필요하기 때문이다.

동적 라우트가 두 개 이상 사용될 때 params에는 값이 다음과 같이 담기게 된다.

 

/category/[genre]/[page] 👉🏻 params = { genre: "action", page: "3" }

 

추가로 동적 경로 값을 문자열(string)으로 전달하는 것이 넥스트의 규칙이다.

그것이 넥스트니까..

 

 

[page] 인 이유

처음 동적 라우트 개념에 대해서 배울 때는 [id]로 사용했는데 이번에는 [page]로 사용한 이유를 간단히 정리해보자면, 

id는 보통 특정한 어떤 것을 지칭하거나 식별할 때 사용한다.

현재 상황에서는 페이지네이션(페이지 이동)이 목적이기 때문에 page로 두었다.

 

또한 변수명을 a, b 등이 아닌 NowPlayingPage처럼 알기 쉽게 짓듯이 페이지 번호임을 직관적으로 알 수 있도록 설정하였다.

 

 

페이지와 버튼의 관계

페이지네이션 로직의 흐름을 적어보자면,

1. 해당 페이지는 인자로 params 객체를 받아, params의 page 값을 숫자로 변환하여 서버 액션 인자로 전달한다.
2. 서버 액션은 받은 인자 값(page)을 API 엔드포인트에 적용한다.
3. 해당 페이지에서 서버 액션 함수를 실행(요청)한다.
4. API 엔드포인트에 해당하는 응답 값을 서버 액션 함수 return에 담는다.
5.  그 응답값을 해당 페이지에서 변수에 담는다.
6. 응답값(변수)으로 map을 돌려서 원하는 값을 찍어낸다.
7. 버튼 컴포넌트에 필요한 값을 props로 전달한다.
8. 버튼 컴포넌트는 useRouter() 훅을 사용하여 라우트를 변경한다.
9. 버튼 컴포넌트는 받은 값들을 이용해서 이전, 다음 버튼을 활성화한다.

 

📍서버 액션

// services > category > surverApi.ts

'use server';
import { ApiResponse } from '@/types/category/movie';
import { TMDB_BASE_URL } from '@/constants/tmdbBaseUrl';

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: `Bearer ${process.env.TMDB_API_KEY}`,
  },
};

// NowPlaying
export const getNowPlaying = async (page: number = 1): Promise<ApiResponse> => {
  const TMDB_NOW_PLAYING_API = `${TMDB_BASE_URL}/now_playing?language=ko&page=${page}&region=KR`;
  const res = await fetch(TMDB_NOW_PLAYING_API, options);
  const data = await res.json();
  return data;
};

 

 

📍페이지 컴포넌트

• 서버 컴포넌트 (훅 사용 못 함)
• 서버 액션을 호출하여 응답 값 받음
• 응답 값으로 영화 카드 리스트를 뿌림
• 응답 값에서 필요한 데이터를 버튼 컴포넌트로 전달
• 페이지네이션 버튼을 포함
• 변동되는 params를 서버 액션에 전달

// app > category > now-playing > [page] > page.tsx

import PageNationBtn from '@/components/pageNationBtn';
import { Movie } from '@/types/category/movie';
import { getNowPlaying } from '@/utils/tmdb/serverApi';
import React from 'react';

// 서버 컴포넌트에서 쿼리 파라미터 가져오기
const nowPlayingPage = async ({ params }: { params: { page: null | string } }) => {
  const page = parseInt(params.page || '1'); // 숫자로 변환 & 기본값=1
  const data = await getNowPlaying(page);
  return (
    <>
      <div>
        <h1>페이지 {page}</h1>
        {data.results.map((movie: Movie) => {
          return <div key={movie.id}>{movie.title}</div>;
        })}
      </div>
      <PageNationBtn page={page} totalPages={data.total_pages} basePath={'category/now-playing'} />
    </>
  );
};

export default nowPlayingPage;

 

 

 

📍버튼 컴포넌트

• 클라이언트 컴포넌트 (훅 사용 가능)
• 버튼 클릭 시 동적 라우트 params 변동시키기(+1 / -1)
• 변동시킨 라우트 적용(router.push)
• 전체 페이지의 값과 비교해서 '이전', '다음' 버튼 비활성화

// components > pageNationBtn.tsx

'use client';

import { useRouter } from 'next/navigation';
interface PageNationProps {
  page: number;
  totalPages: number;
  basePath: string;
}

const PageNationBtn = ({ page, totalPages, basePath }: PageNationProps) => {
  const router = useRouter();

  const goToPage = (newPage: number) => {
    if (newPage < 1 || newPage > totalPages) return;

    router.push(`/${basePath}/${newPage}`); // 히스토리 스택(방문 기록)에 추가
  };

  return (
    <div className='flex gap-8'>
      {page > 1 && <button onClick={() => goToPage(page - 1)}>이전</button>}
      <p>
        페이지 {page} / {totalPages}
      </p>
      {page < totalPages && <button onClick={() => goToPage(page + 1)}>다음</button>}
    </div>
  );
};

export default PageNationBtn;