Django 템플릿에서 변수를 HTML로 렌더링하는 방법

2024-07-27

템플릿 변수 렌더링 기본

템플릿 변수를 렌더링하려면 템플릿 코드에서 다음과 같은 구문을 사용합니다.

{{ variable_name }}

여기서 variable_name은 템플릿 컨텍스트에서 사용할 수 있는 변수 이름입니다. 컨텍스트는 뷰 함수에서 템플릿으로 전달되는 데이터 사전입니다.

예를 들어, 다음과 같은 뷰 함수가 있다고 가정해 봅시다.

from django.shortcuts import render

def my_view(request):
    context = {
        'name': 'Django',
    }
    return render(request, 'my_template.html', context)

이 뷰 함수는 name이라는 변수가 있는 컨텍스트를 템플릿에 전달합니다. 템플릿에서 다음과 같은 코드를 사용하여 이 변수를 렌더링할 수 있습니다.

<h1>안녕하세요, {{ name }}!</h1>

이 코드는 "안녕하세요, Django!"라는 텍스트를 출력합니다.

템플릿 필터 사용

템플릿 변수를 렌더링할 때 템플릿 필터를 사용하여 변수를 포맷할 수 있습니다. 템플릿 필터는 변수를 대문자로 변환하거나 문자열 길이를 계산하는 것과 같은 다양한 작업을 수행하는 데 사용할 수 있습니다.

예를 들어, 다음과 같은 코드를 사용하여 변수를 대문자로 변환할 수 있습니다.

<h1>{{ name | upper }}</h1>

이 코드는 "DJANGO"라는 텍스트를 출력합니다.

템플릿 필터에 대한 자세한 내용은 Django 문서를 참조하십시오:

템플릿 태그는 조건부 코드를 실행하거나 반복 작업을 수행하는 것과 같은 더 복잡한 작업을 수행하는 데 사용할 수 있습니다.

{% for person in people %}
    <p>{{ person.name }}</p>
{% endfor %}

이 코드는 people 변수에 있는 각 항목에 대해 "이름: [이름]" 텍스트를 출력합니다.

템플릿 태그에 대한 자세한 내용은 Django 문서를 참조하십시오:

템플릿 변수 렌더링 관련 문제 해결

템플릿 변수를 렌더링하는 데 문제가 있는 경우 다음 사항을 확인하십시오.

변수 이름이 맞춤법이 되었는지 확인하십시오.
변수가 템플릿 컨텍스트에 전달되었는지 확인하십시오.
올바른 템플릿 필터를 사용하고 있는지 확인하십시오.

Django 템플릿 변수 렌더링 예제 코드

예제 1: 기본 템플릿 변수 렌더링

이 예제에서는 name이라는 변수를 사용하여 "Hello, Django!"라는 텍스트를 출력하는 템플릿을 보여줍니다.

템플릿 코드:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Django 템플릿 예제</title>
</head>
<body>
    <h1>안녕하세요, {{ name }}!</h1>
</body>
</html>

뷰 함수:

from django.shortcuts import render

def my_view(request):
    context = {
        'name': 'Django',
    }
    return render(request, 'my_template.html', context)

설명:

템플릿 코드에서 {{ name }} 구문은 name 변수의 값을 렌더링합니다.
뷰 함수는 name이라는 키가 있는 딕셔너리인 컨텍스트를 템플릿에 전달합니다.
템플릿 엔진은 템플릿 코드를 평가하고 name 변수의 값으로 "Django"를 텍스트로 렌더링합니다.

예제 2: 템플릿 필터 사용

이 예제에서는 upper 템플릿 필터를 사용하여 변수를 대문자로 변환하는 방법을 보여줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Django 템플릿 예제</title>
</head>
<body>
    <h1>{{ name | upper }}</h1>
</body>
</html>

from django.shortcuts import render

def my_view(request):
    context = {
        'name': 'django',
    }
    return render(request, 'my_template.html', context)

upper 필터는 name 변수의 값을 대문자 문자열로 변환합니다.

이 예제에서는 for 템플릿 태그를 사용하여 반복 가능한 변수를 루프하는 방법을 보여줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Django 템플릿 예제</title>
</head>
<body>
    {% for person in people %}
        <p>이름: {{ person.name }}</p>
    {% endfor %}
</body>
</html>

from django.shortcuts import render

def my_view(request):
    people = [
        {'name': 'John'},
        {'name': 'Jane'},
        {'name': 'Peter'},
    ]
    context = {
        'people': people,
    }
    return render(request, 'my_template.html', context)

템플릿 코드에서 {% for person in people %} 루프 태그는 people 변수에 있는 각 항목에 대해 반복합니다.
루프 본문에서 {{ person.name }} 구문은 현재 루프 반복의 name 속성을 렌더링합니다.
딕셔너리에는 각각 'name' 속성이 있는 세 개의 딕셔너리가 포함된 people 리스트가 포함됩니다.
템플릿 엔진

Django 템플릿에서 변수를 렌더링하는 대체 방법

문자열 포맷팅 사용

간단한 문자열을 렌더링하는 경우 문자열 포맷팅을 사용하여 템플릿 변수를 직접 문자열에 포함시킬 수 있습니다. 예를 들어 다음과 같이 할 수 있습니다.

<h1>안녕하세요, %s!</h1>

뷰 함수에서 다음과 같이 문자열을 컨텍스트에 전달할 수 있습니다.

context = {
    'name': 'Django',
}

템플릿 엔진은 템플릿 코드를 평가하고 name 변수의 값을 "Django"로 삽입하여 "안녕하세요, Django!"라는 텍스트를 출력합니다.

safe 템플릿 태그 사용

사용자 입력을 템플릿에 삽입하는 경우 safe 템플릿 태그를 사용하여 악의적인 코드를 방지하는 것이 좋습니다. 예를 들어 다음과 같이 할 수 있습니다.

<h1>{{ name | safe }}</h1>

context = {
    'name': '<script>alert("XSS");</script>',
}

템플릿 엔진은 템플릿 코드를 평가하고 name 변수의 값을 "<script>alert("XSS");</script>"로 삽입하여 "안녕하세요, <script>alert("XSS");</script>!"라는 텍스트를 출력합니다.

템플릿 변수에 별칭을 지정하려면 as 템플릿 태그를 사용할 수 있습니다. 예를 들어 다음과 같이 할 수 있습니다.

{% for person in people as person_list %}
    <p>이름: {{ person_list.name }}</p>
{% endfor %}

people = [
    {'name': 'John'},
    {'name': 'Jane'},
    {'name': 'Peter'},
]
context = {
    'people': people,
}

템플릿 엔진은 템플릿 코드를 평가하고 people 변수를 person_list라는 별칭으로 루프합니다. 루프 본문에서 {{ person_list.name }} 구문은 현재 루프 반복의 name 속성을 렌더링합니다.

템플릿 상속 사용

반복적인 코드를 줄이려면 템플릿 상속을 사용할 수 있습니다. 템플릿 상속을 사용하면 공통 레이아웃을 정의하고 자식 템플릿에서 해당 레이아웃을 확장할 수 있습니다. 예를 들어 다음과 같이 할 수 있습니다.

base.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Django 템플릿 예제</title>
</head>
<body>
    <h1>제목</h1>
    {% block content %}
    {% endblock %}
</body>
</html>

my_template.html

{% extends 'base.html' %}

{% block content %}
    <p>안녕하세요, {{ name }}!</p>
{% endblock %}

context = {
    'name': 'Django',
}

템플릿 엔진은 템플릿 코드를 평가하고 base.html의 기본 레이아웃을 렌더링합니다. 레이아웃의 content 블록은 my_template.html의 자식 템플릿에서 제공된 내용으로 바꿔집니다. 결과적으로 "제목"이라는 제목과 "안녕하세요, Django!"라는 텍스트가 출력됩니다.

django django-templates