Extends & Include

Extends와 Include는 템플릿의 공통된 부분을 줄이기 위한 기법이다.

Extends와 Include는 템플릿의 공통된 부분을 한번만 작성하기 위해 사용하는 기법이다.

아래와 같은 html 파일을 2개 만들고 싶다고 하자.

거의 유사한 형태의 html 파일이지만, 거의 똑같이 다 작성해줘야 했다.

Extends와 Include를 사용하면 이러한 코드를 간결하게 만들수 있다.

<!DOCTYPE html>
<html lang="ko">

	<head>
		<title>Extend 이용해보기</title>
		{% load static %}
		<link rel="stylesheet" type="text/css" href="{% static 'post/index.css' %}" />
	</head>
	
	<body>
	    <nav>
				nav 바
	    </nav>
	    <form action="#" method="GET">
	      <div>
	          <button type="submit">보기</button>
	      </div>
			</form>
	    <footer>
	        footer
	    </footer>
	    <script src="#"></script>
	</body>

</html>

<!DOCTYPE html>
<html lang="ko">

	<head>
		<title>Extend 이용해보기</title>
		{% load static %}
		<link rel="stylesheet" type="text/css" href="{% static 'post/index.css' %}" />
	</head>
	
	<body>
	    <nav>
				nav 바
	    </nav>
	    <form action="#" method="GET">
	      <div>
	          <button type="submit">추가</button>
	      </div>
			</form>
	    <footer>
	        footer
	    </footer>
	    <script src="#"></script>
	</body>

</html>

💡

base.html 만들기

우선 템플릿에 공통적으로 들어갈 부분을 만들어주자.

템플릿에 공통적으로 들어갈 부분은 따로 html 파일로 만들어야 한다.

보통은 base.html 이라는 이름으로 많이 사용한다.

<!DOCTYPE html>
<html lang="ko">

	<head>
		<title>Extend 이용해보기</title>
		{% load static %}
		<link rel="stylesheet" type="text/css" href="{% static 'post/index.css' %}" />
	</head>
	
	<body>
	    <nav>
				nav 바
	    </nav>
	    {% block content %}
	    {% endblock %}
	    <footer>
	        footer
	    </footer>
	    <script src="#"></script>
	</body>

</html>

위와 같이 공통된 부분만 넣어서 html 파일을 작성해줬다.

단, 중간에

{% block <이름> %}

{% endblock %}

과 같은 코드를 작성해주었는데,

이는 각 템플릿의 개별적인 코드가 들어갈 자리를 의미한다.

💡

extend 이용하기

{% extends './base.html' %}
{% load static %}
{% block content %}
	<form action="#" method="GET">
	      <div>
	          <button type="submit">보기</button>
	      </div>
	</form>
{% endblock %}

이후에는 만들었던 base.html의 공통된 부분을 index.html에서 extend를 통해 가져온다.

약간은 파이썬의 import 느낌과도 같다.

그리고

{% block content %}

{% endblock %}

사이에 index.html만의 개별적인 내용을 넣어주기만 하면 된다.

{% extends './base.html' %}
{% load static %}
{% block content %}
	<form action="#" method="GET">
	      <div>
	          <button type="submit">추가</button>
	      </div>
	</form>
{% endblock %}

add.html 역시 마찬가지이다.

이처럼, 공통된 부분을 extend 해오니 코드가 훨씬 간결해진 것을 확인할 수 있다.

extend는 특히 템플릿의 개수가 늘어날 수록 정말 중요하고 유용한 기능이 될 것이다.

💡

include와 extends의 차이

extend는 파일별로 수정하고 싶은 부분을 설정해서 block을 통해 바꿔줄 수 있었지만,

include는 단순히 똑같은 내용을 불러오고 싶을 때 사용한다.

{% include'./base2.html' %}
{% load static %}

block을 사용할 필요가 없을 때 위와 같이 사용해주면 된다.

사실, extends의 하위호완 같은 느낌으로 꼭 사용하지는 않아도 될 것 같다.