thymeleaf ) 타임리프 관련 나 혼자 보는 저장용

간단한 표현:
◦ 변수 표현식: ${...}
◦ 선택 변수 표현식: *{...}
◦ 메시지 표현식: #{...}
◦ 링크 URL 표현식: @{...}
◦ 조각 표현식: ~{...}
• 리터럴
◦ 텍스트: 'one text', 'Another one!',…
◦ 숫자: 0, 34, 3.0, 12.3,…
◦ 불린: true, false
◦ 널: null
◦ 리터럴 토큰: one, sometext, main,…
• 문자 연산:
◦ 문자 합치기: +
◦ 리터럴 대체: |The name is ${name}|
• 산술 연산:
◦ Binary operators: +, -, *, /, %
◦ Minus sign (unary operator): -
• 불린 연산:
◦ Binary operators: and, or
◦ Boolean negation (unary operator): !, not
• 비교와 동등:
◦ 비교: >, <, >=, <= (gt, lt, ge, le)
◦ 동등 연산: ==, != (eq, ne)
• 조건 연산:
◦ If-then: (if) ? (then)
◦ If-then-else: (if) ? (then) : (else)
◦ Default: (value) ?: (defaultvalue)
• 특별한 토큰:
◦ No-Operation: _

 

 

HTML 엔티티(<, >)를 태그의 시작이 아니라 문자로 표현하는 것 : 이스케이프

 

이스케이프 기능을 사용하고 싶다면?

th:text = "이스케이프 제공" 

 

사용하기 싫다면?

th:utext = "이스케이프 싫어"

[(이스케이프 싫어)]

 

: 하지만 거의 이스케이프를 사용합니다...

 

 

${ EL 사용 }

 

- User 의 username을 가져오고 싶어요!

 

Object

user.username

user['username']

user.getUsername() 메서드 직접 호출

 

List

users[0].username

users[0]['username']

users[0].getName() 메서드 직접 호출

 

Map

userMap['userA'].username

userMap['userA'] ['username']

userMap['userA'].getUserName() 메서드 직접 호출

 

 

 

th:with 지역 변수 선언 (태그 안에서만 사용)

<div th:with="first=${users[0]}">
	<p> 첫 번째 이름은 <span th:text="${first.username}"></span></p>
</div>

 

 

HTTP 요청 파라미터 접근 : param

${param.paramData}

HTTP 세션 접근 : session

${session.sessionDate}

스프링 빈 접근 @

${@helloBean.hello('spring')}

 

 

 

<타임리프 유틸리티 객체>

#template 날짜용 유틸 ( LocalDateTime )

<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

 

 

URL @{링크}

@{/hello}

@{/hello(param1=${param1}, pram2=${param2})}

-> /hello?pram1=hi&param2=hello

 

@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}

-> /hello/data1/data2

 

@{/hello/{param1}(param1=${param1}, param2=${param2})}

-> /hello/data1?param2=data2

 

/hello 절대경로

hello 상대경로

 

 

 

리터럴(소스 코드상에서 고정된 값)

 

문자 '문자'

숫자 0

불린 true, false

null

 

 

문자는 항상 '여기에 써야함'

공백이 없다면 생략 가능하긴 함

th:text="hello"

 

근데 공백이 있으면 오류뜸

th:text="hello world" 오류

" ' hello world ' " 써도 되긴 하는데

걍 "|hello word|" 쓰세용 맘편하게~

 

_ 쓰면 타임리프 동작 안하는 거처럼 가능

<span th:text="${data}? : _"> 데이터가 없음 </span>

데이터가 없음 그대로 출력됨

 

 

 

th: 를 쓰면 타임리프가 기존 속성을 대체함

<span text="어쩌구" th:text="저쩌구"> ....

출력하면

<span text="저쩌구">

이렇게 뜸

 

 

 

th:attrappend 속성 값 뒤에 값 추가

th:attrprepend 속성 값 앞에 값 추가

th:classappend class 속성에 자연스럽게 추가

 

<input class="text " th:attrappend="love">

-> <input class="text love">

뒤에 붙으니까 속성 마지막에 띄어쓰기 필수 !

-> attraprpend 도 마찬가지로 앞 띄어쓰기 필수 (안그러면 인식못함)

 

<input class="text" th:classappend="class='good'"/>

-> <input class="text good"> 이 때는 띄어쓰기 안해도 자연스럽게 추가됨

 

 

 

 

checked 속성 처리하기

<input type="checkbox" ckecked="false"/>

-> 요렇게 해도 이미 checked 속성이라 체크가 되어버림...ㅠㅠ

 

하지만 타임리프가 등장한다면~ 뚜따?

체크드의 속성도 가볍게 제거~

<input type="checkbox" th:checked="false"/>

렌더링 후

-> <input type="checkbox"/>

 

 

 

반복문

th:each

 

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

<td th:text="${user.username}">username</td>

<td th:text="${user.age}">age</td>

</tr>

 

모델에 들어온 name 값 users(List)을 하나씩 꺼내서 user라고 부를 거야

user의 username, age를 list.size 만큼 반복해서 출력해줘

 

 

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

user는 users 리스트에서 가져온 값 하나씩 들어가는데,

userStat은 현재 루프에 대한 상태를 보여줌

 

index : 0부터 시작하는 값

count : 1부터 시작하는 값

size : 전체 사이즈

event , odd : 홀수, 짝수 (boolean)

first , last : 처음, 마지막? (boolean)

current : 현재 객체

 

 

 

조건식

if , unless (if의 반대, else)

 

<span th:text="좋아해" th:if="${user.age lt 20}"></span>

user의 age가 20 이하면 좋아해 출력

<span th:text="좋아해" th:unless="${user.age ge 20}"></span>

user의 age가 20 이상이면 출력 안 함

-> 해당 조건이 맞지 않으면, 아예 태그 랜더링을 안 함

 

<td th:switch="${user.age}">

<span th:case="10">10살</span>

<span th:case="20">20살</span>

<span th:case="*">기타</span>

 

* 는 만족하는 조건이 없다면 해당

자바 default 에 해당

 

 

 

 

 

 

 

 

<!--/* */-->

타임리프 전용 주석

- 페이지에서 렌더링 안 됨

 

<!--/*-->

<p></p>

<table></table>

<!--*/-->

ㄴ <p>와 <table> 태그들도 다 렌더링 안 됨

 

 

 

<!--/*/ /*/-->

타임리프 프로토타입 주석

- html에선 주석

- 타임리프 렌더링에선 보임

(웹에서 html 파일로 열었을 땐 안보임)

(타임리프로 렌더링 된 경우에만 보임)

 

 

<th:block> 블록

타임리프 자체 태그

 

<tr>, <td> 처럼 태그 안에 속성이 정의되면 좋은데

태그를 안 쓰고 블록 안에 묶고 싶을때 쓴다

 

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

<span th:text="${user.age}">...</span>

.

.

</th:block>

여기서는 span 태그들을 하나로 묶었다

 

 

 

자바스크립트 인라인

 

<script th:inline="javascript"> 얘로 적용

 

 

자바스크립트에서 오류가 나지 않게 렌더링해줌

 

var username = [[${user.username}]];

인라인 사용 전 : userA

인라인 사용 후 : "userA" <- 따옴표를 렌더링해줬다

 

 

타임리프의 내추럴템플릿(html 파일을 바로 열어도 동작) 기능에

주석을 이용해서 활용 가능하다 

 

var username = /*[[${user.username}]]*/ "test username";

인라인 사용 전 : var username = /*userA*/ "test username";

인라인 사용 후 : var username = "userA";

-> 주석을 값으로 넣고, 뒤에 쓰였던 건 지워줌

 

 

객체 json 자동 변환해줌

var user = [[${user}]];

인라인 사용 전 : var user = BasicController.User(username=userA, age=10); <- toString

인라인 사용 후 : var user = {"username":"userA", "age":10}; <- json

 

 

자바스크립트 인라인 each 반복문

[# th:each="user, stat : ${users}"]

var user[[${stat.count}]] = [[${user}]];

[/]

users의 값을 하나씩 user에 담고, stat은 users의 상태를 말해

var user[n] = user

출력해줘

n 은 stat의 카운트, 1, 2, 3....

 

th:onclick

클릭하면 이벤트가 일어남

th:onclick="|location.href='@{/members/add}'|"

나는 해당 url로 이동할 것이다