[Headless UI 라이브러리 개발] Pagination 구현 계획

       Pagination 이란? 

Pagination은 데이터를 여러 페이지로 나누어 보여주기 위한 기법으로, 아래와 같은 예시들이 있다.

(각 사진별 링크를 걸어두었다!)

 

---

Pagination  컴포넌트 개발 목표

접근성이 높고 재사용 가능한 Pagination 컴포넌트 구현하기!

 

---

Pagination 컴포넌트에서 고려해야할 기능

Pagination 컴포넌트를 제작하기 앞서 고려해야할 기능들을 정리해보았다.

기본 기능 외에도 추가할 수 있는 기능들이 더러 있었고, 차근차근 추가해볼 예정!

 

1 기본 기능

• 페이지 번호 표시

• '이전', '다음' 버튼

• '처음', '마지막' 버튼 (사용자가 해당 기능 사용할지 선택)

• 페이지 버튼을 클릭하면 해당 페이지로 이동

• 총 페이지수와 현재 페이지 표시 (사용자가 해당 기능 사용할지 선택)

 

2 추가 기능

• 범위 기반 페이지네이션 (1-5페이지)

• 비활성화된 버튼 기능 (첫번째, 마지막 페이지에서 '이전', '다음', '처음', '마지막' 버튼 비활성화)

 

3 기본 디자인 요소

• 사용자가 아이콘을 직접 수정할 수 있도록 함

• 클릭된 페이지 버튼에 효과주기

 

---

       Link? Button? 

처음에 이미 만들어져있는 headless ui들의 pagination들을 살펴봤을 때,

1. Link를 사용하여 각 버튼을 구성하는 방식과

2. 그냥 버튼만을 사용하는 방식이 있었다.

둘 중 어떤 방식을 골라야할지 모르겠어서 조금 리서치를 해보았다.

 

1 Link 사용하기

사용자가 페이지를 이동할 때 새로운 url로 이동하는 방식이다.

일반적으로 Next.js와 같은 SPA(Single Page Application)에서 페이지 이동을 할 때 자주 사용된다.

장점
• SEO 최적화 : 페이지를 새로 로드하는 방식이므로, 검색 엔진이 각 페이지를 별도로 인식할 수 있다.
• 브라우저 히스토리 : '뒤로가기'를 통해 이전 페이지로 돌아갈 수 있다.

단점
•  새로고침 : 페이지를 이동할 때마다 전체 페이지가 새로 로드되기 때문에 지연이 발생한다.
•  URL 구조 필요 : url을 기반으로 페이지가 이동하기 때문에 url을 반영해야 한다.

 

 

2 Button 사용하기

클라이언트 측에서만 동작하며, AJAX 요청을 통해 새로운 데이터를 가져올 때 사용하는 방식이다.

장점
• 빠른 페이지 전환 : 페이지를 새로고침 하지 않고 데이터를 갱신하기만 하면 되어 전환이 빠르다.
• url에 의존하지 않음 : 사용자가 url을 수정하여 특정 페이지로 이동하거나 페이지를 새로 고침해도 문제가 발생하지 않는다.

단점
• SEO 최적화 문제 : url에 페이지 번호를 반영하지 않기 때문에 각 페이지를 별도로 크롤링하지 못한다.
• 히스토리 문제 : 사용자가 '뒤로 가기'를 할 때, 페이지 상태가 변경되지만 url은 변경되지 않기 때문에 이전 상태로 돌아갈 수 없다.

 

 

💡 어떤 상황에서 어떤 방식을 사용해야 할까?

 

1 Link

• SEO 최적화가 중요한 경우 (예: 검색 결과에서 페이지가 노출되어야 하는 경우)

• 각 페이지가 고유한 url을 가져야 하는 경우

• 사용자가 뒤로가기/ 앞으로 가기 기능을 사용해야 할 경우

 

2 Button

• 페이지 새로고침 없이 빠른 페이지 전환이 필요한 경우 (단순한 목록 표시, 데이터 필터링 등)

• SEO 최적화가 중요하지 않은 경우 (개인 대시보드나 비공개 페이지)

• 서버에 요청을 보내 동적으로 데이터를 갱신하고자 할 경우

 

 

결론!!!! SEO가 필요하면 Link 기반, 속도가 중요한 경우 Button 기반 Pagination을 사용하는 것이 일반적이다.

때에 따라 혼합하여 사용하는 경우도 있다고 하니, 둘 중 어느쪽을 택해도 무방할 것 같다는 생각이 들었고, Button으로 진행하기로 결정했다.

 

---

Pagination 컴포넌트의 구조

• Pagination : 전체 페이지네이션을 담당하는 컴포넌트

• Buttons : 각 페이지 번호를 표시하고, 클릭 시 해당 페이지로 이동하는 버튼

• Previous, Next : 이전/다음 페이지로 이동하는 버튼

• Start, End : 시작/끝 페이지로 이동하는 버튼

• PageInfo : 총 페이지 수를 표시

 

---

구현 계획

1 기본 컴포넌트 생성

• Pagination 컴포넌트를 생성하고, currentPage, totalPages, pageLimit 등을 props로 받아 페이지네이션 버튼 렌더링

 

2 페이지네이션 버튼 구현

• '이전', '다음', '처음', '끝' 등의 버튼을 누르면 해당 페이지로 이동

• '처음', '끝' 버튼의 경우 사용자가 사용하거나 사용하지 않을 수 있도록 설정

 

3 페이지 이동 및 상태 업데이트

• 각 버튼 클릭 시 currentPage를 변경하여 ui 변경

• '이전', '다음', '처음', '끝' 버튼으로 ui 변경

 

4 접근성 개선

• 버튼에 aria-label을 추가하여 스크린 리더가 읽을 수 있도록 한다.

• 페이지 이동이 가능할 때에만 버튼들이 활성화 되도록 설정

 

5 스타일

• 기본 스타일 추가

• 현재 페이지 강조

• 비활성화된 버튼 스타일링

 

6 추가 기능

• 사용자가 한 번에 몇개의 페이지를 표시할지 선택할 수 있는 기능