Spring / Thypeleaf 기본정리 (블록, 자바스크립트 인라인, 템플릿 조각)

 

타임리프 블록 (th:block)

 

- HTML 태그를 만들지 않고 타임리프 로직만 묶기 위해 사용하는 가상 태그

- 렌더링 결과 HTML에는 전혀 남지 않음

<th:block th:if="${user != null}">
    <p th:text="{user.username}">이름</p>
    <p th:text="{user.age}">나이</p>
</th:block>
 
<th:block th:each="user : ${users}">
    <li th:text="${user.username}">이름</li>
</th:block>
 
 // <ul>이나 <ol> 구조 안에서 자주 씀

 

- th:block은 HTML 구조를 깨지 않고 타임리프 로직을 묶는 용도

 

자바스크립트 인라인 (th:inline = "javascript")

 

- 서버에서 내려준 데이터를 자바스크립트 코드 안에서 안전하게 사용

- 문자열, 숫자, 객체를 JS 문법에 맞게 변환

<script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];
</script>
 
<script th:inline="javascript">
    var user = [[${user}]]
</script>
 
-> 자동으로 JSON 변환된다.
 
 

 

- JS 인라인은 서버 데이터를 JS 문법으로 안전하게 주입하는 기능을 말한다.

 

템플릿 조각 (Fragment)

 

- HTML의 일부를 조각(fragment)으로 만들어 

- 여러 페이지에서 재사용하는 방법

<header th:fragment="header">
    <h1>My Site</h1>
</header>
 
<footer th:fragment="footer">
    <h1>footer</h1>
</footer>
 
<div th:replace="~{fragments/header :: header}"></div> // div 코드 자체가 대체된다.
<div th:insert="~{fragments/footer :: footer}"></div> // footer 코드가 div에 삽입된다.