타임리프(Thymeleaf) 공통 템플릿

타임리프(Thymeleaf)에서는 반복적으로 사용하는 문장을 공통 템플릿으로 만들고 필요한 부분에 삽입하여 사용할 수 있습니다. 아래의 소스는 오류메세지를 출력하는 부분을 공통 템플릿으로 만들고 필요한 곳에서 사용하는 예제입니다. 

 

form_errors.html (오류메세지를 출력하는 공통 템플릿)

<div th:fragment="formErrorsFragment" class="alert alert-danger" 
    role="alert" th:if="${#fields.hasAnyErrors()}">
    <div th:each="err : ${#fields.allErrors()}" th:text="${err}" />
</div>

div 테그에 th:fragment="formErrorsFragment" 속성을 이용해서 공통 템플릿을 적요하게 됩니다. 

 

write.html (공통 템플릿을 이용할 템플릿)

<form th:action="@{/write}" th:object="${writeForm}" method="post">
    <div th:replace="form_errors :: formErrorsFragment"></div>
    <div class="mb-3">
        <label for="subject" class="form-label">제목</label>
        <input type="text" th:field="*{subject}" class="form-control">
    </div>
    <div class="mb-3">
        <label for="content" class="form-label">내용</label>
        <textarea th:field="*{content}" class="form-control" rows="10"></textarea>
    </div>
    <input type="submit" value="저장하기" class="btn btn-primary my-2">
</form>

 

타임리프의 th:replace 속성을 사용하면 공통 템플릿을 템플릿 내에 삽입할수 있습니다. 
<div th:replace="form_errors :: formErrorsFragment"></div> 의 의미는 div 엘리먼트를 form_errors.html 파일의 th:fragment 속성명이 formErrorsFragment인 엘리먼트로 교체하라는 의미입니다. 

 

참고사이트 : https://wikidocs.net/161911