코드 재사용성 향상: 템플릿 상속을 통해 공통 레이아웃, 헤더, 푸터, 네비게이션 바 등을 중앙 집중식으로 관리할 수 있다. 이를 통해 각 페이지마다 반복되는 마크업을 줄이고, 효율적으로 코드를 재사용할 수 있다.
유지보수 용이: 공통 요소를 한 곳에 모아두면 사이트 전반에 걸쳐 변경사항을 적용하기가 훨씬 쉽다. 예를 들어, 사이트의 헤더 디자인을 변경하려면 헤더의 html파일만 수정하면 모든 페이지에 자동으로 적용된다.
일관된 사이트 디자인: 템플릿 상속을 사용하면 사이트의 모든 페이지에서 일관된 레이아웃과 스타일을 유지할 수 있다. 이는 사용자 경험을 향상시키고 전문적인 웹사이트의 외관을 유지하는 데 중요하다.
개발 시간 단축: 공통 레이아웃을 재사용함으로써 개발자는 각 페이지의 고유한 내용에 더 집중할 수 있고, 개발 시간을 단축할 수 있다.
오류 감소: 코드의 중복이 줄어들면 실수의 가능성도 줄어든다. 한 곳에서만 수정하면 되기 때문에, 오류를 줄이고 일관성을 유지할 수 있다.
확장성과 유연성: 기본 템플릿을 상속받아 새로운 페이지를 쉽게 추가하거나 기존 페이지를 수정할 수 있다. 이를 통해 웹사이트의 확장성과 유연성이 향상된다.
{% block %} 태그 활용법
Django 템플릿 시스템에서 {% block %} 태그는 템플릿 상속의 핵심 요소 중 하나이다.
{% block %} 태그는 베이스 템플릿(부모 템플릿)에 "자리 표시자" 역할을 하여, 상속받는 템플릿(자식 템플릿)에서 해당 부분을 오버라이드(재정의)할 수 있게 한다.
이를 통해 동일한 레이아웃 구조를 가진 여러 페이지에서 각기 다른 내용을 표시할 수 있다.
블록 식별자를 통해 한 페이지 내에 여러 블록을 정의하여 사용할 수 있다.
{% block [식별자] %}
예를 들어, 'header', 'footer', 'main_content' 등의 이름을 사용하여 블록을 정의한다면 아래와 같이 할 수 있다.
{% block header %} header 내용 작성 {% endblock %}
{% block footer %} footer 내용 작성 {% endblock %}
{% block main_content %} main_content 내용 작성 {% endblock %}
템플릿 상속 예제
실제 예제를 통해 템플릿 상속이 어떻게 동작하는지 확인해보자.
먼저, 부모 템플릿(base.html)을 작성한다.
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My Website{% endblock %}</title>
<!-- 여기에 CSS 파일, JavaScript 파일 등을 포함할 수 있습니다 -->
</head>
<body>
<header>
<!-- 헤더 내용 -->
</header>
<nav>
<!-- 네비게이션 바 -->
</nav>
<main>
<p>base.html 내용입니다.</p>
<hr>
{% block content %}
<!-- 페이지별 내용이 들어갈 부분 -->
{% endblock %}
</main>
<footer>
<!-- 푸터 내용 -->
</footer>
</body>
</html>
자식 템플릿에서는 {% block title %}와 {% endblcok %}, {% block content %}와 {% endblock %} 사이의 내용을 재정의 할 수 있다.
자식 템플릿(base_test.html)을 작성한다.
<!-- base_test.html -->
{% extends "base.html" %}
{% block title %}base html 상속받은 페이지 - My Website{% endblock %}
{% block content %}
<h1>Welcome to My Website</h1>
<p>This is the home page.</p>
{% endblock %}
먼저 {% extends "base.html" %}를 통해서 부모 템플릿을 상속 받는다.
자식 템플릿(base_test.html)에서 부모 템플릿(base.html)의 title 블록과 content 블록을 자체적인 내용으로 재정의한다.
django 서버를 실행하여 자식 템플릿(base_test.html)을 렌더한 페이지에 접속하면 아래와 같은 결과가 나타난다.
자식 템플릿의 페이지 타이틀과 content의 내용이 재정의 된 것을 확인할 수 있다.
또한, 부모 템플릿의 내용도 확인할 수 있다.
추가
템플릿 상속을 모르더라도 사이트를 개발하는 데 전혀 지장은 없다.
하지만 사이트의 공통 요소(로그인, 회원가입, 검색창, 메뉴 등)들을 템플릿 상속을 이용하여 개발한다면 앞서 작성한 템플릿 상속의 이점을 누릴 수 있을 것이다.
개발하는 페이지의 수가 늘어날 수록 템플릿 상속을 이용한다면 개발 시간이 획기적으로 줄어들 것이다.
