[Django] 장고 Template

2023.11.28.화

장고 Template

Django는 자체 템플릿 언어를 사용한다

이 언어는 독자적인 구문과 규칙을 가진 언어로, HTML과 같은 텍스트 기반 형식을 출력한다
템플릿은 기본적으로 텍스트 파일이며 텍스트 기반 형식 (HTML, XML, CSV 등)을 생성할 수 있다

 

템플릿 렌더링

템플릿 파일은 뷰에 의해서 렌더링된다

# views.py
def detail(request, question_id):
    question = Question.objects.get(id=question_id)
    context = {'question': question}
    return render(request, 'pybo/question_detail.html', context)

템플릿 디렉터리

템플릿 파일을 작성하기 앞서 템플릿 디렉터리를 지정해야한다

템플릿 디렉터리는 템플릿 파일을 저장할 디렉터리이다

해당 디렉터리는 settings.py의 TEMPLATES 항목에서 지정가능하다

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'], # 템플릿 디렉터리 지정
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

 

장고는 DIRS에 설정한 디렉터리 외에도 앱 디렉터리 바로 하위에 있는 templates 디렉터리도 템플릿 디렉터리로 인식한다

템플릿 파일

템플릿 파일은 views.py에서 .render 함수를 통해 렌더링된다

장고에서 템플릿은 .html의 확장자를 사용하지만 Django의 템플릿 언어 요소도 포함되어 있다

<!-- 템플릿 예시 -->
{% if question_list %}
    <ul>
    {% for question in question_list %}
        <li><a href="/pybo/{{ question.id }}/">{{ question.subject }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>질문이 없습니다.</p>
{% endif %}

템플릿 태그

템플릿을 보면 {%와 %}로 이루어진 문장이 있는데

이를 템플릿 태그라고 한다

 

다음은 위의 코드에서 사용된 템플릿 태그들의 설명이다

태그	설명
{% if question_list %}	question_list가 있다면
{% for question in question_list %}	question_list를 순회하며 순차적으로 하나씩 question에 대입
{{ question.id }}	for문에 의해 대입된 question 객체의 id 번호를 출력
{{ question.subject }}	for문에 의해 대입된 question 객체의 제목을 출력

 

여기서 question_list는 render 함수로 전달된 "질문 목록" 데이터이다

 

많이 사용되는 템플릿 태그를 알아보자

 

분기

{% if 조건문1 %}
    <p>조건문1에 해당되는 경우</p>
{% elif 조건문2 %}
    <p>조건문2에 해당되는 경우</p>
{% else %}
    <p>조건문1, 2에 모두 해당되지 않는 경우</p>
{% endif %}

파이썬의 if문과 매우 비슷하며 항상 {% endif %} 태그로 닫아주어야 한다

 

반복

{% for item in list %}
    <p>순서: {{ forloop.counter }} </p>
    <p>{{ item }}</p>
{% endfor %}

파이썬의 for문과 유사하며 {% endfor %} 태그로 닫아주어야 한다

또한 템플릿 for문 안에서는 forloop 객체를 사용할 수 있다

foorloop 속성	설명
forloop.counter	루프내의 순서로 1부터 표시
forloop.counter0	루프내의 순서로 0부터 표시
forloop.first	루프의 첫번째 순서인 경우 True
forloop.last	루프의 마지막 순서인 경우 True

 

객체 출력

<!-- {{ 객체 }} -->
{{ item }}

<!-- {{ 객체.속성 }} -->
{{question.id}}
{{question.subject}}

템플릿 상속

템플릿에서 가장 유용한 측면은 템플릿 상속이다

사이트의 기본적인 공통요소를 포함하는 '스켈레톤' 템플릿을 만들고

자식 템플릿이 오버라이드할 수 있는 블록을 정의할 수 있다

 

예를 들면 사이트의 헤더, 푸터, 탐색 메뉴를 호함하는 base.html 템플릿을 가질 수 있고

자식 템플릿은 이 기본 템플릿을 확장하여 개별 페이지로 활용한다

 

상속 관련 태그	설명
{% extends %}	부모 템플릿을 지정(상속)
{% include %}	다른 템플릿 파일의 내용을 현재 템플릿에 포함
{% block %}	자식 템플릿에서 오버라이드할 블록을 지정

 

{% extends %}와 {% include %}의 용도는 비슷하지만

 

{% extends %}는 상속으로 기본 템플릿을 만들고 여러 템플릿에서 그 기본 템플릿을 확장하는 데 사용한다

기본 템플릿에서 {% block %} 태그를 사용하여 일부 영역을 정의하고

다른 템플릿에서는 이를 확장하고 대체한다

예시: 기본 레이아웃을 만들고, 특정 페이지마다 해당 레이아웃을 확장하여 페이지마다 필요한 내용을 채운다

{% include %}는 포함으로 다른 템플릿이나 일부 템플릿 코드를 현재 템플릿에 포함시킬 때 사용한다
특정 템플릿 파일의 내용을 현재 템플릿에 그대로 가져와서 포함한다
예시: 여러 페이지에서 공통으로 사용되는 헤더, 푸터 등을 따로 관리하고, 각 페이지에서 {% include %}를 사용하여 이를 삽입

 

{% include %} 는 그대로 코드 조각을 가져와 포함하기 때문에 동적인 페이지를 구성하기 힘들다

{% extends %}는 {% include %}와 달리 페이지의 역참조가 일어난다

 

 

해당 구조는 커스텀태그를 활용한 HTML 파일 작성에서 사용한 방식과 매우 흡사하다

2023.08.05 - [Web/Web] - [Web] day43 : 커스텀태그

[Web] day43 : 커스텀태그

frontend 에서 사용할 수 있는 모듈화 기법이라는 공통점이 있으며

사용시 장점으로 코드의 재사용성 증가, 가독성 증가, 유지보수 용이가 있다

 

이 밖에 다양한 템플릿 내용은 다음을 참고하도록 하자

https://docs.djangoproject.com/en/4.0/topics/templates/

Django