[Django] 중복되는 템플릿 코드 없애기, 템플릿 상속 / 2021.08.29

* 참고 자료 : 코드잇 Django 강의

 

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

이 중복되는 코드를 템플릿 상속을 통해서 해결할 수 있다.

템플릿 상속이란 여러가지 파일의 중복되는 코드를 모아서 부모 파일로 만들어주고 자식 파일에서는 공통되는 코드를 부모 파일에서 상속받고 다른 부분만 작성하는것을 말한다.

장고에서 템플릿 상속은

{% block %}
{% extends %}

 

를 사용해서 구현한다.

 

1. 부모 파일 만들기

먼저 index.html과 같은 디렉터리에 부모 파일인 base.html을 만들어주자.

 

 

2. 뼈대가 되는 부분은 부모파일인 base.html에,

변경이 되는 부분은 자식파일인 index.html으로!

먼저 index.html 코드를 그대로 복사해 base.html에 붙여놓고,

코드잇에서 제공한 코드에서는 food-container 클래스의 내용이 변경되므로 지워주자.

 

3. block 템플릿 태그 사용하기.

{% block 블록 이름 %}
{% endblock 블록 이름 %}

 

부모 파일인 base.html에서 자주바뀌는 내용인 food-container class 안에 block 템플릿 태그를 

블록 이름 : food-container 로 적어주고,

또 자주 바뀌는 내용인 날짜부분을 블록 이름 : date-block 으로 적어준다.

 

base.html

이렇게 하면 부모 템플릿 완성이다.

부모 템플릿은 변경되는 부분은 block태그로 감싸주고 변경되지 않는 부분은 남겨두면 된다.

 

4. 자식 템플릿에서 상속 받기

부모 템플릿에서 block태그로 감싸주었으니 자식 템플릿에서는 상속 받기만 하면 된다.

 

상속 태그 : 항상 가장 첫 줄에 써주어야 한다

{% extends '부모템플릿 경로' %}

 

그 다음 자식 템플릿에 내용을 적고, 부모 태그와 똑같이 block태그로 감싸준다.

 

index.html

웹페이지를 열어보면,

 

출처 : 코드잇

 

상속하기 전과 똑같이 나오는 것을 확인할 수있다.