🧩 Django Jinja 템플릿 완전 가이드

Django의 프론트엔드 렌더링은 Jinja 기반 템플릿 언어를 통해 동작합니다. HTML과 Python 변수를 자연스럽게 결합하여 웹 페이지를 효율적으로 구성할 수 있습니다. 이번 포스트에서는 Jinja 기본 문법부터 block/extends 활용법까지 실전 예제와 함께 시각적으로 정리합니다.

1️⃣ Jinja 문법 정리

Jinja는 HTML 내에서 동적 데이터를 표현하기 위해 다음과 같은 문법을 사용합니다.

🔤 기본 문법 요소

유형 문법 설명

변수 출력	{{ 변수명 }}	파이썬에서 전달받은 값을 출력함
조건문	{% if 조건 %} ... {% endif %}	조건에 따라 HTML 코드 분기
반복문	{% for item in list %} ... {% endfor %}	리스트를 반복 순회하며 출력
주석	{# 주석 내용 #}	템플릿 내에서 처리되지 않는 주석문

2️⃣ block 사용법

block은 템플릿 안에서 특정 영역을 정의하고, 하위 템플릿에서 해당 영역을 커스터마이징할 수 있게 해줍니다.

📌 예시: base.html

<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}기본 제목{% endblock %}</title>
</head>
<body>
  <div class="container">
    {% block content %}
    <p>기본 콘텐츠입니다.</p>
    {% endblock %}
  </div>
</body>
</html>

🔍 설명

{% block title %}: 자식 템플릿에서 제목을 바꿀 수 있는 영역
{% block content %}: 본문 영역 (페이지마다 다른 내용으로 구성 가능)

3️⃣ extends 사용법

extends는 상위 템플릿(base.html)의 구조를 재사용하는 방식입니다. 반복적인 HTML 구조를 줄이고 유지보수를 쉽게 만들어줍니다.

📌 예시: post_list.html

{% extends 'base.html' %}

{% block title %}게시글 목록{% endblock %}

{% block content %}
  <h1>📋 게시글 리스트</h1>
  <ul>
    {% for post in posts %}
      <li>{{ post.title }}</li>
    {% endfor %}
  </ul>
{% endblock %}

🔍 설명

extends: base.html을 상속하여 공통 레이아웃을 가져옴
각 block을 재정의하여 개별 페이지 콘텐츠 구성

✅ 실전 꿀팁

💡 반복문과 조건문 활용 예시

{% if posts %}
  {% for post in posts %}
    <p>{{ post.title }}</p>
  {% endfor %}
{% else %}
  <p>게시글이 없습니다.</p>
{% endif %}

💡 HTML 파일 위치 규칙

템플릿 파일은 보통 templates/앱이름/파일.html에 위치
settings.py에서 TEMPLATES['DIRS']에 templates 폴더 경로 추가 필수

TEMPLATES = [
  {
    'DIRS': [BASE_DIR / 'templates'],
  }
]

🎯 요약 정리

{{ 변수 }}로 동적 데이터 출력, {% if %}, {% for %}로 흐름 제어
block은 재정의 가능한 영역, extends는 상위 템플릿을 상속받는 구조
템플릿 분리는 유지보수성과 재사용성을 극대화하는 핵심 전략