타임리프 기본 문법
Categories: spring
타임리프 사용 선언
타임리프 사용 선언을 위해선 다음 문장을 html파일에 작성해 주어야 한다.
< html xmlns:th="http://www.thymeleaf.org" >
텍스트 출력
-
텍스트 출력 (text) HTML의 콘텐츠에 데이터를 출력할 때는 다음과 같이 th:text 를 사용하면 된다. < span th:text=”${data}” >
컨텐츠 안에 직접 표현하고 싶다면 [[${data}]] 로 표현하면 된다.
- html 문서는 <,> 같은 특수 문자로 작성되는데, 이를 출력할 때에는 두가지 방법을 사용할 수 있다.
- th:utext
- [(…)]
-
타임리프가 해석하지 않게하기 위해서는 다음 태그를 사용하면 된다. th:inline=”none”
-
변수 표현식 : ${…}
타임리프 유틸리티 객체
타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 제공한다. 필요한 객체가 있으면 그때 그때 공식문서를 참고하여 찾아보는 것이 좋다.
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utility-objects
URL 링크
타임리프에서 URL을 생성할 때는 @{…} 문법을 사용하면 된다.
1) 단순한 URL
@{/url}
2) Query Paramether
@{/hello(param1=${param1}, param2=${param2})}
() 에 있는 부분은 쿼리 파라미터로 처리된다.
/hello/?param1=param1¶m2=param2
3) path variable
@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}
()가 있는 부분이 path variable로 처리된다.
문자 리터럴
타임리프에서 문자열을 표현하기 위해서는 ‘‘로 감싸주어야 한다.
<span th:text="'hello'">
위와 같은 방법은 계속 감싸기 귀찮으니 리터럴 대체표현을 사용하면 좋다
<span th:text="|hello ${data}|">
속성 값 설정
1) 속성 설정 html 속성 값의 값을 th:*로 새롭게 설정할 수 있다.
<input type="text" name="mock" th:name="userA" />
2) 속성 추가 th:classappend : class 속성에 자연스럽게 추가할 수 있다.
반복
타임리프에서는 반복을 위해 th:each를 사용한다. 리스트, Iterable, Enumeration을 구현한 객체에 대해서 반복을 사용할 수 있다.
오른쪽 컬렉션의 값을 변수로 꺼내와 사용할 수 있다. 두번째 변수에 값을 넣으면 반복의 상태를 가져올 수 있다.
<tr th:each="user, loops : ${users}">
<td th:text="${user.username}">username</td>
<td th:text="${user.age}">0</td>
</tr>
조건문
조건문을 넣고 조건을 만족하면 해당 태그를 출력하고 아니면 출력하지 않는다
<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
자바스크립트 인라인
자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능이 있다. 자바스크립트 인라인 기능은 다음과 같이 적용하면 된다.
<script th:inline="javascript">
타임리프가 변수의 값 그대로 넣으면 문자형식이면 문자로 값의 타입을 바꿔주어야 하는등의 문제가 생기기 때문에 자바스크립트 인라인을 활용해 값 변경을 신경쓰지 않고 받을 수 있다. 객체는 JSON으로 바꾸어 사용할 수 있다.
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
var user = [[${user}]];
</script>
템플릿 조각
타임리프는 공통영역 부분을 재사용 할 수 있도록 해주는데, 이를 템플릿 조각이라고 한다. th:fragment 가 있는 태그는 다른곳에 포함되는 코드 조각으로 사용된다.
th:insert 또는 th:replace 로 템플릿 조각을 불러와 재사용 할 수 있다.
Leave a comment