타임리프-기본기능

타임리프 특징

• 서버 사이드 html 렌더링
  -> 백엔드 서버에서 html을 동적으로 렌더링
• 네츄럴 템플릿
  -> 순수 html을 그대로 유지하면서 뷰 템플릿도 사용할 수 있음
• 스프링 통합 지원
  -> 스프링의 다양한 기능을 편리하게 사용 가능

텍스트-text,utext

텍스트 출력

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

@GetMapping("text-basic")
public String textBasic(Model model){
    model.addAttribute("data","<b>Hello Spring<b>");
    return "basic/text-basic";
}

• 이스케이프
  -> 컨트롤러에서 <b> 태그를 걸어도 타임리프에서 html 엔티티를 타고 넘어가기 때문에 우리의 의도는 <b> 태그를 거는것이지만 적용되지않고 문자 그대로 출력된다.

이스케이프 탈출하기

<li>th:utext = <span th:utext="${data}"></span></li>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li>

스프링EL 표현식

지역변수

th:with

<div th:with="first=${users[0]}">
    <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

선언한 태그 안에서만 사용가능

기본 객체

${#request}
${#response}
${#session}
${#servletContext}
${#locale}

#request 같은 경우는 HttpServletRequest 객체 제공 데이터 조회시 request.getParameter사용

• Http 요청 파라미터 접근 param
  -> ${param.paramdata}
• http 세션 접근 session
  -> ${session.sessionData}
• 스프링 빈 접근 @
  -> ${@helloBean.hello('Spring!')}

유틸리티 객체

#message : 메시지, 국제화 처리
#uris : URI 이스케이프 지원
#dates : java.util.Date 서식 지원
#calendars : java.util.Calendar 서식 지원
#temporals : 자바8 날짜 서식 지원
#numbers : 숫자 서식 지원
#strings : 문자 관련 편의 기능
#objects : 객체 관련 기능 제공
#bools : boolean 관련 기능 제공
#arrays : 배열 관련 기능 제공
#lists , #sets , #maps : 컬렉션 관련 기능 제공
#ids : 아이디 처리 관련 기능 제공, 뒤에서 설명

URL 링크

<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>

리터럴

타임리프에서 문자 리터럴은 항상 '(작은 따옴표)'로 감싸야한다
th:text ="hello world" 오류 발생 -> 띄어쓰기가 있어서 인식 x
th:text ="'hello world'" 리터럴로 인식

• 리터럴 대체 문법

<span th:text="|hello ${data}|"></span></li>

연산자

• Elvis 연산자
  ->data1?:data2 true면 data1 false면 data2

• No-Operation
  -> data1?:_ true면 data1 false면 출력하지 않는다

속성 설정

<input type ="text" name ="mock" th:name="userA" />

name이 th:name으로 대체된다.

th:attrappend : 속성 값의 뒤에 값을 추가한다.
th:attrprepend : 속성 값의 앞에 값을 추가한다.
th:classappend : class 속성에 자연스럽게 추가한다.

checked 처리

html 입장에서는 checked 만 있으면 값에 상관없이 체크가 된다 그럴땐 th: checked를 써주면 체크상태를 따로 정할수 있다.

반복

<tr th:each="user : ${users}">

반복시 오른쪽 컬렉션( ${users} )의 값을 하나씩 꺼내서 왼쪽 변수( user )에 담아서 태그를 반복 실행합니다

반복상태 유지

<tr th:each="user, userStat : ${users}">
<td th:text="${userStat.count}">username</td>
 <td th:text="${user.username}">username</td>
 <td th:text="${user.age}">0</td>
 <td>
 index = <span th:text="${userStat.index}"></span>
 count = <span th:text="${userStat.count}"></span>
 size = <span th:text="${userStat.size}"></span>
 even? = <span th:text="${userStat.even}"></span>
 odd? = <span th:text="${userStat.odd}"></span>
 first? = <span th:text="${userStat.first}"></span>
 last? = <span th:text="${userStat.last}"></span>
 current = <span th:text="${userStat.current}"></span>
 </td>

상태 유지
userstat은 생략이 가능하다.
index : 0부터 시작하는 값
count : 1부터 시작하는 값
size : 전체 사이즈
even , odd : 홀수, 짝수 여부( boolean )
first , last :처음, 마지막 여부( boolean )
current : 현재 객체

조건부 평가

if unless

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

if 값이 false면 태그 자체가 삭제된다.

case문

</tr>
<tr th:each="user, userStat : ${users}">
<td th:text="${userStat.count}">1</td>
<td th:text="${user.username}">username</td>
<td th:switch="${user.age}">
<span th:case="10">10살</span>
<span th:case="20">20살</span>
<span th:case="*">기타</span>
</td>
</tr>

블록

<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>

each로 돌리기 애매할때 block으로 묶어서 할수있다.

자바스크립트 인라인

th:inline="javascript"
var username = [[${user.username}]];
인라인 사용전 -> userA;
인라인 사용후 -> "userA";

var username2 = /[[${user.username}]]/ "test username";
인라인 사용 전 -> /userA/ "test username";
인라인 사용 후 ->var username2 = "userA";

객체는 json으로 자동변환.

자바스크립트 인라인 each

<script th:inline="javascript">
 [# th:each="user, stat : ${users}"]
 var user[[${stat.count}]] = [[${user}]];
 [/]
</script>

템플릿 조각

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>

<footer th:fragment="copy">
    푸터 자리 입니다.
</footer>

<footer th:fragment="copyParam (param1, param2)">
    <p>파라미터 자리 입니다.</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
</footer>

</body>

</html>

<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>

<h2>전체 치환 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>

<h2>전제 치환 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>

<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>

웹페이지의 공통영역을 처리할때 쓴다.
fragment 선언을 해두면 메소드 불러오듯이 쓸수 있다.

템플릿 레이아웃

템플릿 조각이 일부 코드 조각을 가지고왔다면 레이아웃은 코드 조각을 레이아웃에 넘겨서 사용하는 방법이다.

base.html

<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
 <title th:replace="${title}">레이아웃 타이틀</title>
 <!-- 공통 -->
 <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/
awesomeapp.css}">
 <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
 <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></
script>
 <!-- 추가 -->
 <th:block th:replace="${links}" />
</head>

layoutMain.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
 <title>메인 타이틀</title>
 <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
 <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
</html>

layoutMain.html에 있는 ::title이 현재 있는 title 태그를 전달
::link는 link 태그를 전달 , html도 전달 가능