URL 링크
- 타임리프에서 URL 생성시 @{...} 문법을 사용하면됨.
- @{/hello(param1={param2})}
- /hello?param1=data1¶m2=data2
- ()부분은 쿼리 파라미터로 처리됨.
리터럴(Literals)
- 소스 코드상에 고정 된 값을 말함.
- 예시
String a = "Hello";
int a = 10 * 20;Hello -> 문자 리터럴
10, 20 -> 숫자 리터럴
타임리프에는 다음과 같은 리터럴 존재.
- 문자 : 'hello'
- 숫자 : 1
- 불린 : true,false
- null : null
타임리프에서 문자 리터럴은 항상 ' ' 로 감싸야함.
단, 공백없이 쭉 이어져있다면 하나의 의미있는 토큰으로 인지해서 작은 따옴표를 생략할 수 있다.
<span th:text="hello world!"></span>
-> 공백이 존재해서 하나의 의미있는 토큰으로 인식안됨.
<span th:text="'hello world!'"></span>
-> 따옴표로 감싸면 정상 동작연산
- HTML 안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분 주의
- 기본적으로 자바와 크게 다르지않음.
-
비교연산
>(gt) , < (lt) , >=(ge), <= (le), !(not), == (eq) ,!=(neq,ne) 괄호안에 문자로 적어도 적용됨. -
조건식 : 자바와 유사
-
Elvis 연산자 : 조건식의 편의버전
-
<li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"</span></li> date가 조건에 만족하면 data가 찍히고 만족하지 않는다면 '데이터가 없습니다'가 찍힘.
-
-
No-operation : _ 인경우 마치 타임리프가 실행되지 않는 것처럼 동작
<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>
data가 조건에 만족하면 data가 찍히고 만약 데이터가 없는 경우에는 타임리프가 실행되지않고 적어둔 문자가 출력됨 -> "데이터가 없습니다" 가 출력.속성값 설정
- 타임리프 태그 속성
- 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작 -> 적용시 기존 속성을 대체 없으면 새로만들어줌.
속성 설정
- th:name => name 태그 대신 렌더링을 통해서 바꿔줌
속성 추가
- th:attrappend : 속성 값의 뒤에 값 추가
- th:attrprepend : 속성 값의 앞에 값 추가
- th:classappend: class 속성에 자연스럽게 추가.
checked 처리
-
th:checked 는 값이 false 인경우 check 속성 자체를 제거한다.
<input type="checkbox" name="active" th:checked="false"/> 타임리프 렌더링시 <input type="checkbox" name="active" /> 제거된 상태로 나옴.
반복
- th:each 를 통해서 반복문 사용
<tr th:each="user : ${users}">
<td th:text="${user.username}">username</td>
</tr>반복시 컬렉션인 ${users} 의 값을 하나씩 꺼네서 외쪽 변수 user에 담아서 태그를 반복 실행
- each 태그 안에서는 꺼내진 변수의 파라미터 값을 사용할 수 있다.
반복 상태 유지 기능
- index : 0 부터 시작하느 값
- count : 1부터 시작하는 값
- size : 전체 사이즈
- even,odd : 홀수, 짝수 여부(boolean)
- first,last : 처음 ,마지막 여부(boolean)
- current : 현재 객체
@GetMapping("/each")
public String each(Model model){
addUsers(model);
return "basic/each";
}
private void addUsers(Model model) {
List<User> list = new ArrayList<>();
list.add(new User("userA",10));
list.add(new User("userB",20));
list.add(new User("userC",30));
model.addAttribute("users",list);
}
list에 값을 넣어두고 model에 추가
for each 문 예제코드
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>기본 테이블</h1>
<table border="1">
<tr>
<th>username</th>
<th>age</th>
</tr>
<tr th:each="user : ${users}">
<td th:text="${user.username}">username</td>
<td th:text="${user.age}">0</td>
</tr>
</table>
<h1>반복 상태 유지</h1>
<table border="1">
<tr>
<th>count</th>
<th>username</th>
<th>age</th>
<th>etc</th>
</tr>
<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>
</tr>
</table>
</body>
</html>실행 결과
index 의경우 0번째 부터 시작
count의 경우 1번 부터 시작
size는 list의 총 크기
current -> 현재객체가 뭔지 알려줌.
조건
- 타임리프의 조건식
- if, unless
- 해당 조건이 맞지 않으면 태그 자체를 렌더링 하지 않는다.
<!-- 현재 유저가 20살보다 적은 경우 th:if가 true 기 때문에 미성년자 출력
만약 20살보다 많은 경우 렌더링 되지않아서 미성년자가 출력되지않는다.-->
<span th:text="'미성년자'" th:if="${user.age (<)lt 20}"></span>
<!-- th:unless는 if문의 반대의미-->
<span th:text="'미성년자'" th:unless="${user.age (>)ge 20}"></span>switch
- 자바의 switch문과 그렇게 다르지 않음.
- "*"인경우는 default 의미 -> 조건이 없을때 전부 해당
<td th:switch="${user.age}">
<span th:case="10">10살</span>
<span th:case="20">20살</span>
<span th:case="*">기타</span>
</td>- user의 나이가 10살이면 10살출력
- 20살이면 20살 출력
- 그외의 경우 기타로 출력된다.
열심히하자