02 Django 공통 페이징 처리 | ✅저자: 이유정(박사)

Django 공통 페이징 처리 개발 과정

1. 개요

Django 프로젝트에서 여러 페이지에서 공통적으로 사용되는 페이징 기능을 모듈화하고 재사용하기 위해 common 앱을 만들고, 템플릿 태그 및 공통 템플릿으로 페이징을 처리합니다. 아래는 일반적인 페이징 처리와 제네릭 뷰에서의 처리 방식까지 나누어 설명합니다.

📚 참고: 점프 투 장고 페이징 처리

2. 공통 페이징 처리 개발 과정

1) common 앱 생성 및 설정

python manage.py startapp common

settings.py

INSTALLED_APPS = [
    ...
    'common',
]

2) 템플릿 태그 생성

common/templatetags/pagination_tags.py

from django import template

register = template.Library()

@register.inclusion_tag('common/_pagination.html', takes_context=True)
def render_pagination(context, page_obj, adjacent=5):
    paginator = page_obj.paginator
    current = page_obj.number
    start = max(current - adjacent, 1)
    end = min(current + adjacent, paginator.num_pages)
    return {
        'page_obj': page_obj,
        'page_range': range(start, end + 1),
    }

3) 템플릿 디렉토리 구조

common/
├── templatetags/
│   └── pagination_tags.py
└── templates/
    └── common/
        └── _pagination.html

4) 페이징 템플릿 생성

templates/common/_pagination.html

<ul class="pagination justify-content-center">
  {% if page_obj.has_previous %}
    <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">이전</a></li>
  {% else %}
    <li class="page-item disabled"><span class="page-link">이전</span></li>
  {% endif %}

  {% for num in page_range %}
    {% if num == page_obj.number %}
      <li class="page-item active"><span class="page-link">{{ num }}</span></li>
    {% else %}
      <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
    {% endif %}
  {% endfor %}

  {% if page_obj.has_next %}
    <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">다음</a></li>
  {% else %}
    <li class="page-item disabled"><span class="page-link">다음</span></li>
  {% endif %}
</ul>

3. 일반적인 페이징 처리 예시

views.py

from django.core.paginator import Paginator
from django.shortcuts import render
from .models import Question


def question_list(request):
    question_queryset = Question.objects.all()
    paginator = Paginator(question_queryset, 10)  # 페이지당 10개
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    return render(request, 'questions/list.html', {'question_list': page_obj})

templates/questions/list.html

{% load pagination_tags %}

<!-- 목록 출력 -->
{% for question in question_list %}
  <p>{{ question.title }}</p>
{% endfor %}

<!-- 페이징 처리 -->
{% render_pagination question_list %}

4. 제네릭 뷰에서의 페이징 처리

views.py

from django.views.generic import ListView
from .models import Question

class QuestionListView(ListView):
    model = Question
    paginate_by = 10
    template_name = 'questions/list.html'
    context_object_name = 'question_list'

urls.py

from django.urls import path
from .views import QuestionListView

urlpatterns = [
    path('', QuestionListView.as_view(), name='question_list'),
]

templates/questions/list.html

{% load pagination_tags %}

<!-- 목록 출력 -->
{% for question in question_list %}
  <p>{{ question.title }}</p>
{% endfor %}

<!-- 페이징 처리 -->
{% render_pagination question_list %}

5. 마무리

• common 앱을 통해 공통적인 페이징 UI 컴포넌트를 만들고 재사용할 수 있습니다.
• 제네릭 뷰든, 함수형 뷰든 동일하게 {% render_pagination page_obj %} 혹은 {% render_pagination question_list %} 호출만으로 통일된 UI를 적용할 수 있습니다.
• Bootstrap 등 프론트엔드 스타일 가이드에 따라 _pagination.html을 자유롭게 수정하면 전체 UI를 쉽게 일괄 변경할 수 있습니다.