[HTMX] htmx를 활용하여 컨텐츠만 새로 고침하기, django-htmx 적용

우선 버튼을 클릭했을 때, 특정 콘텐츠만 새로고침 하도록 HTML 코드에 HTMX를 설정하여 줍니다.

새로고침 버튼을 클릭하면 tag-list-container가 innerHTML swap 설정으로 변경됩니다.

    <button class="btn btn-primary my-3"
            hx-get="{% url 'blog:tag_list' %}"
            hx-target="#tag-list-container"
            hx-swap="innerHTML transition:true"
    >새로고침
    </button>
    
	<div id="tag-list-container">
        {% include "blog/_tag_list.html" %}
    </div>

 

이후 views.py에서 요청 헤더에 hx_reuqest가 존재하는지 판단하고, 존재하면 부분 템플릿, 존재하지 않으면 전체 템플릿을 사용합니다.

    is_htmx = request.META.get("HTTP_HX_REQUEST") == "true"
    if is_htmx:
        template_name = "blog/_tag_list.html"
    else:
        template_name = "blog/tag_list.html"

    return render(
        request,
        template_name,
        {
            "tag_list": tag_qs,
        },

 

아래는 부분 템플릿과 전체 템플릿의 예시입니다.

{# blog/templates/blog/tag_list.html #}
{% extends "blog/base.html" %}

{% block title %}태그 목록{% endblock %}

{% block content %}
    <h2>태그 목록</h2>
    {% include "blog/_tag_list.html" %}
    <hr/>
    <a href="{% url 'blog:tag_new' %}">새 태그</a>
{% endblock %}



{# blog/templates/blog/_tag_list.html : HTML 레이아웃없이 컨텐츠로만 구성 #}

<div class="list-group">
    {% for tag in tag_list %}
        <div class="list-group-item">{{ tag.name }}</div>
    {% endfor %}
    </div>

 

 

django-htmx 라이브러리 적용

1. Install with pip:

python -m pip install django-htmx

2. Add django-htmx to your INSTALLED_APPS:

INSTALLED_APPS = [
    ...,
    "django_htmx",
    ...,
]

 

3. Add the middleware:The middleware adds request.htmx, as described in Middleware

MIDDLEWARE = [
    ...,
    "django_htmx.middleware.HtmxMiddleware",
    ...,
]

 

기존 코드 변경

request.META.get에서 확인하는 코드를 request.htmx 코드 하나로 줄일 수 있다.

    # is_htmx = bool(request.htmx)  # request.META.get("HTTP_HX_REQUEST") == "true"
    # if is_htmx:
    if request.htmx: