본문 바로가기
Study/Django

[Django] 5. 템플릿 설정 및 렌더링

by DevJaewoo 2021. 11. 16.
반응형

Django LOGO

 

Intro

사용자에게 데이터를 보여주기 위해 HTML에 데이터를 넣어야 하는데, Django에선 이를 위해 템플릿이라는 유용한 기능을 제공합니다.

 

HTML의 경우 정적이기 때문에 데이터를 추가하고 제거하는데 어려움이 있습니다. 하지만 템플릿을 이용하면 Python 코드를 HTML로 바꿔주어 빠르고 쉽게 동적인 웹사이트를 만들 수 있습니다.

 

이번 시간에는 Django의 템플릿 설정과 뷰에서 렌더링 하는 방법에 대해 알아보겠습니다.


템플릿 파일 생성

우선 reviews APP 디렉터리에 템플릿 파일을 저장하기 위한 templates 디렉터리를 만들어줍니다.

디렉토리 생성

 

그다음 생성된 templates 디렉터리에 hello.html이라는 파일을 하나 생성해줍니다.

파일 생성

 

생성 시 기본적인 태그들은 이미 자동완성이 되어있습니다.

이제 <body> 태그 안에 아래의 코드를 추가해줍니다.

 

<h1>Hello, {{ name }}!</h1>

 

위 코드의 {{ }} 부분은 템플릿 변수입니다. 후에 View 에서 렌더링 할때 name의 값을 동적으로 변경시켜줄 수 있습니다.

템플릿 변수, 필터, 태그 등에 관한 내용은 추후에 다시 정리하여 포스팅하도록 하겠습니다.

 

추가 후 코드는 다음과 같습니다.

 

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello, {{ name }}!</h1>
</body>
</html>

 

reviews APP에 템플릿 파일을 만들었다면 이제 템플릿을 찾을 수 있도록 reviews APP을 settings.py에 추가해줘야 합니다.

settings.py의 INSTALLED_APPS 리스트 마지막에 'reviews', 를 추가해줍니다.

반영 후 코드는 다음과 같습니다.

 

settings.py - INSTALLED_APPS

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'reviews',
]

템플릿 렌더링

views.py에 기존에 만들었던 index 함수와 내용이 같은 hello라는 이름의 함수를 하나 추가하겠습니다.

def hello(request):
    name = request.GET.get('name', 'world')
    return HttpResponse(f'<h1>Hello, {name}!</h1>')

 

여기서 맨 아래의 return 문을 다음과 같이 바꿔줍니다.

return render(request, 'hello.html', {'name': name})

 

반영 후 코드는 다음과 같습니다.

 

views.py

from django.http import HttpResponse
from django.shortcuts import render


def index(request):
    name = request.GET.get('name', 'world')
    return HttpResponse(f'<h1>Hello, {name}!</h1>')


def hello(request):
    name = request.GET.get('name', 'world')
    return render(request, 'hello.html', {'name': name})

 

urls.py에도 반영해줍니다.

 

urls.py

import reviews.views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', reviews.views.index),
    path('hello/', reviews.views.hello),
]

결과 확인

서버를 재시작하고 http://localhost:8000/hello?name=DevJaewoo 에 접근하면 다음과 같이 결과가 잘 나오는것을 확인할 수 있습니다.

 

실행 결과


질문이나 개선사항은 언제든지 댓글로 남겨주세요.

이상으로 포스팅을 마치겠습니다.

반응형