Thymeleaf

https://6161990src.tistory.com/81

5. 타임리프의 표현식

기본적 표현식

변수식 ${user.firstName} 

타임리프에서는 변수식에 HTTP 세션(#httpSession)과 HTTP 요청(#httpServletRequest)을 비롯한 각종 타임리프가 관리하는 변수에 접근하거나 메서드를 실행할 수 있다.

선택 변수식 *{name}

변수식에서는 ${user.name}, ${user.age}, ${user.tel} 처럼 특정 객체의 프로퍼티에 연속으로 접근하고 싶을 때가 자주 있다. 이러한 경우에는 th:object 속성과 선택 변수식으로 조합해서 사용하면 변수식보다 간단하게 기술할 수 있다.

HTML요소에 th:object=${user}를 정의해두면 *{name}, *{address}, *{tel} 와 같이 user를 생략한 형태로 기술할 수 있다.

메시지식 #{status.reserved.message} 

타임리프에서는 메시지를 키-값으로 관리한다. 메시지의 키 값(status.reserved.message)이으로 메시지 본문을 가져오고 싶을 때 메시지 식을 사용한다. 메시지에 삽입하는 매개변수는 #{home.welcome(${session.user.name})}과 같이 키 값의 뒷부분에 괄호를 붙이고 그 안에 매개변수 값을 나열하면된다.

링크 URL 식 @{/echo} 

타임리프에서는 링크 URL을 이용해 지정한 URL(이 예에서는 /echo)이 시작되는 부분에 컨텍스트 경로를 추가할 수 있다. 예를 들어 컨텍스트 경로가 app이라면 app/echo가 된다.

리터럴

문자열을 표현하기 위한 텍스트 리터럴은 작은따옴표로 둘러싼다. 또한 값으로 포함된 작은 따옴표는 ‘\’로 이스케이프 해야한다. 

• 텍스트 리터럴 : ‘spring framework’ , ‘I\’m a user’
• 수치 리터럴 : 0, 1.4, 2021
• 불린값 리터럴 : true, false
• Null 리터럴 : null

기본적인 연산자

• 산술 연산 : th:text=”${price} * ${num}”
• 논리 연산 : th:if=”${not todo.finished}”
• 마이너스 부호: th:text=”-10″
• 비교 연산 : th:if=”${items.count} gt 1″

타임리프는 마크업 언어이기 때문에 < 등으로 이스케이프해야한다.

• gt (>)
• lt (<)
• ge (>=)
• le (<=)
• not (!)
• eq (==)
• neq/ne(!=)

텍스트 연산자

• 텍스트 추가 th:text=” ‘ My name is ‘ + ${username}. “
• 텍스트 치환 th:text=” | My name is ${username} | “

조건 연산자

• 삼항 연산자 th:class=”${row.even}? ‘even’ : ‘odd'”
• 엘비스 연산자 th:text=”${username}? : ‘Sam Smith'”

5. HTML 요소의 출력 제어

조건에 따른 출력 여부 제어

• th:if 속성 값이 참인 경우에만 대상이 되는 HTML 요소를 출력한다.
• th:unless 속성 값이 거짓인 경우에만 대상이 되는 HTML 요소를 출력한다.
• th:switch 자식 요소에 기술된 th:case 속성의 값과 비교 평가를 하기 위한 값을 설정한다.
• th:case 부모 요소의 th:switch 속성 값의 경우에만 대상이 되는 HTML 요소를 출력한다.

th:if 예시 

<div th:if="${not #strings.isEmpty(room.remark)}">
	<label>비고</label>
	<span th:text="*{room.remark}">비고가 입력되어 있으면 표시</span>
</div>

// #strings.isEmpty ?
타임리프가 제공하는 문자열을 위한 유틸리티. 문자열이 공백 또는 null인 경우에 참을 반환

th:switch / th:case 예시

	<div th:switch="*{room.size}">
		<label> 방 크기 </label>
		<span th:case="'L'">대</span>
		<span th:case="'M'">중</span>
		<span th:case="'S'">소</span>
		<span th:case="'*'">불명</span>  // 어느 속성에도 해당하지 않을 때 * 
	</div>

반복 출력 제어

지정한 배열 값의 수만큼 HTML 요소를 반복 출력하는 것처럼 출력 반복을 제어할 수 있는 th:each.

th:each에는 다음과 같은 배열에 해당하는 타입을 지정해야한다.

• java.util.List 구현 클래스
• java.util.Iterable 구현 클래스
• java.util.Map 구현 클래스
• 배열

반복 출력 시의 메타정보

프로퍼티	설명
index	현재 반복 인덱스(0부터 시작)
count	현재 반복 인덱스(1부터 시작)
size	반복 대상의 총 건수
current	현재 반복 처리에서 취급하는 요소 값
odd	현재 반복 처리에서 홀수 여부를 나타내는 논리 값
even	현재 반복 처리에서 짝수 여부를 나타내는 논리 값
first	현재 반복 처리에서 첫번째 여부를 나타내는 논리 값
last	현재 반복 처리에서 마지막 여부를 나타내는 논리 값

th:each의 예

<tr th:each="prod : ${products}">
	<td th:text="${prodStat.count}">1</td> 
	<td th:text="${prod.name}">Tomato</td>
	<td th:text="${prod.price}">4980</td>
	<td th:text="${prod.stock == 0? '품절' : prod.stock}">10</td>
</tr>


//2 라인
'반복 대상의 현재 값을 저장하는 변수명: 반복 대상의 배열 값' 형식으로 지정
products 리스트를 대상으로 현재 값을 저장하는 변수명을 prod로 정의

//3 라인
반복에 대한 메타 정보에 접근하려면 타임리프가 묵시적으로 생성한 변수를 이용(변수명에 접미사 Stat을 부여)

5. 스프링과의 연계

폼 객체와 바인딩

HTML 폼과 폼 객체의 연결은 th:object 속성과 th:field 속성을 사용한다.

• th:object HTML 폼에 연결되는 폼 객체를 지정하기 위한 속성
• th:field 입력 항목에 연결되는 폼 객체의 프로퍼티를 지정하기 위한 속성

	<form th:action="@{/sample}" th:method="POST" th:object="${fruit}">
		
		<input type="text" name="fruit" th:field="*{watermelon}" />

	</form>

• th:object  : 연결하고 싶은 폼 객체를 변수 식으로 사용해 지정한다. (변수식에는 모델에 저장한 폼 객체의 속성명을 지정)
• th:field  : 연결하고 싶은 폼 객체의 프로퍼티를 선택 변수식으로 사용해 지정한다. (선택 변수식은 폼 객체의 프로퍼티명을 지정하며 중첩된 프로퍼티를 지정하는 경우에는 ‘.’로 프로퍼티명을 연결하면된다. th:field=”${fruit.watermelon}” )

입력 오류 표시

스프링 MVC의 입력값 검사 기능에서 발생한 오류 표시에는 th:errors , th:errorclass , #field 객체를 사용한다.

• th:errors   오류 메시지의 출력 대상을 지정하기 위한 속성
• th:errorclass 오류 발생 시 적용하는 css 클래스를 지정하기 위한 속성
• #field 오류 정보에 접근하기 위한 편리한 메서드를 제공하는 객체

<input type="text" name="text" th:field="*{text}" th:errorclass="fieldError"/>
<span th:errors="*{text}">오류메세지</span>