[django] Django 중복되는 템플릿 코드 없애기

템플릿은 중복이 많이 일어나는 컴포넌트 중 하나이다. 

하나의 웹서비스는 무수히 많은 웹페이지들로 이루어져 있고, 그때마다 중복된 코드를 매번 쓰는 것은 비효율적이다. 

중복된 코드를 쓰는 문제를, Django에서는 템플릿 상속을 통해 해결한다. 

 

템플릿 상속
=  여러 자식 파일들의 공통적인 부분은 부모 파일로 만들어주고, 
자식 파일에서는 공통되는 부분은 부모 파일로부터 상속 받고, 달라지는 부분만 따로 작성한다. 

 

템플릿 상속은, 다음의 템플릿 태그를 사용해서 구현된다. 

{% block %} ~ {% extends %}

 

 

<템플릿 상속하는 방법> 

 

(1) index.html에서 뼈대가 되는 기본 구조를 부모 템플릿인 base.html으로 만들기 

 index파일과 같은 위치에 base.html 부모 파일 만들어준다.

base.html의 위치는 foods > templates > foods > base.html, index.html  

 

 

(2) index.html에 있는 내용 모두 base.html에 복사하고, 변하는 부분들은 삭제해주기 

base.html = 부모 템플릿 (뼈대) 

index.html = 자식 템플릿 (변경되는 부분) 

 

<div class="food-container"> 

food-container안의 부분들은 계속 변화하는 부분이기 때문에, 삭제해준다. 

계속 변화하는 부분인 음식점 종류는 자식 템플릿 내부에서 구현해준다. 

 

지워진 부분에는 자식 템플릿인 index.html에서 작성한 코드가 들어가도록 해야한다. 

자식템플릿에서 코드를 넣어주는 부분을 {% blcok %} - {% endblock %}으로 지정해준다. 

어디까지가 블록인지 알아야하기 때문에 {% endblock %}태그도 같이 필요하다. 

블럭의 이름은 똑같이 food-container로 한다. 

자식 템플릿에서 food-container 코드를 작성하면 

{% block food-container %} - {% endblock food-container %} 안에 코드가 들어간다! 

 

날짜 부분도 자주 변경되므로, 삭제하고  블럭을 만들어준다. 

날짜 부분도 블록으로 지정해주기 

{% block date-block %} - {% endblock date-block %} 

 

부모 템플릿
= 변경되는 부분은 블록으로 만들어주고, 변경되지 않는 부분은 남겨두면 된다. 

 

이제 부모 템플릿이 완성됐다! 

 

(3) 자식 템플릿에서 상속 받기 

 

이제 자식 템플릿에서 부모 템플릿을 상속받아서 사용하면 된다. 

index.html 자식 템플릿으로 돌아가서, 부모 템플릿에 있는 내용들은 모두 지워준다. 

기존 index.html 모습 

 이 내용들은 이제 base.html에 들어가 있으므로 삭제해준다. 

{% load static %}만 남겨지고 모두 지워진다. 

자식 파일에서도 정적파일에 접근할 것이므로 모두 지워준다. 

 

자식 템플릿 index.html에서 어떤 부모 템플릿을 사용할지 명시해주기 

같은 디렉토리 안의 'base.html'을 부모 템플릿으로 한다고 명시해준다. 

{% extends '부모 템플릿 위치' %}, extends 템플릿 태그는 항상 ! 자식 템플릿 가장 위에 적어주어야 한다 !

 

(4) 자식 템플릿, 어떤 블록을 채울지 적고, 우리가 채울 내용들을 넣어주기. 

우리가 채워질 블록인 {% block food container %} ~ {% endblock food container %}을 적고, 블록 내부에 변하는 부분들에 대한 내용을 적어준다. 

 

그럼 자식 템플릿에서 상속 받는 것도 끝 !!! 

장고는 뭔가 만들어내는 재미가 조금 있는것 같다...!

이 강의가 끝나면 나도 뭐라도 만들어봐야지 !