1.타임리프 기초

타임리프 특징

• 서버 사이드 렌더링(SSR)
• 내츄럴 템플릿
  순수 html을 최대한 유지하는 특징이 있다.
  웹 브라우저에서 파일을 열어도 내용을 확인할 수 있다.
• 스프링 통합 지원

타임리프 기능

텍스트 - text, utext

<h1>컨텐츠에 데이터 출력하기</h1>
<ul>
    <li>th:text 사용 <span th:text="${data}"></span></li>
    <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>

이스케이프 : HTML에서 사용하는 특수문자(ex)'<','>')를 HTML엔티티로 변경해주는 것
타임리프가 제공하는 th:text 는 기본적으로 이스케이프를 제공한다.

이스케이프를 쓰고 싶지 않을 경우 utext, [(...)] 사용

변수 - SpringEL

controller가 넘겨준 데이터 호출법
object

• ${user.username}
• ${user['username']}

List

• ${user[0].username}

Map

• ${user.['userA'].username}

지역변수 th:with

객체

• ${#request} : request 객체 사용
• ${#response} : response 객체 사용
• ${#session} : session 객체 사용
• ${#servletContext}
• ${#locale}
• ${param.paramData} : 파라미터 접금
• ${session.sessionData} : 세션 접근
• ${@helloBean.hello('Spring')} : 빈 접근
• ${#temporals} : 날짜 객체

URL 링크

controller

@GetMapping("/")
public String link(Model model) {
     model.addAttribute("param1", "data1");
     model.addAttribute("param2", "data2");
     return "basic/link";
}

html소스

<ul>
 <li><a th:href="@{/hello}">basic url</a></li>
 <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query 
param</a></li>
 <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=$
{param2})}">path variable</a></li>
 <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=$
{param2})}">path variable + query parameter</a></li>
</ul>

결과

/hello
/hello?param1=data1&param2=data2
/hello/data1/data2
/hello/data1?param2=data2

반복

th:each

<tr th:each="user : ${users}">
 <td th:text="${user.username}">username</td>
 <td th:text="${user.age}">0</td>
</tr>

조건부

th:if
조건이 만족하지 않으면 태그 자체가 출력안됨

<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>

블록

보통 타임리프는 html의 속성으로 사용하게 되는데 속성으로 해결하기 어려운 부분을 해결하기 위해 타임리프의 태그인 블록 태그를 사용하게 될 경우가 있다.

<th:block th:each="user : ${users}">
 <div>
 사용자 이름1 <span th:text="${user.username}"></span>
 사용자 나이1 <span th:text="${user.age}"></span>
 </div>
 <div>
 요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
 </div>
</th:block>

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

자바스크립트 인라인 사용 전

var username = [[${user.username}]]
// ""필요
var user = [[${user}]]
// 객체를 user 변수에 담을 수 없음, user.toString()한 문자열이 담김

자바스크립트 인라인 사용 후

<script th:inline = "javascript">
	var username = [[${user.username}]]
    // 자바스크립트 내추럴 템플릿
    var username2 = /*[[${user.username}]]*/ "test username";
    // 서버에서 렌더링 될 경우 user.username출력됨.
    // 객체
    var user = [[${user}]];
    // 객체를 json으로 넣어준다.
</script>

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
 [# th:each="user, stat : ${users}"]
 var user[[${stat.count}]] = [[${user}]];
 [/]
</script>

<script>
var user1 = {"username":"userA","age":10};
var user2 = {"username":"userB","age":20};
var user3 = {"username":"userC","age":30};
</script>