Thymeleaf의 공식 매뉴얼
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-is-thymeleaf
Thymeleaf의 특징
1. 서버 사이드 HTML 렌더링 (SSR)
타임리프는 백엔드 서버에서 JSP처럼 HTML을 동적으로 랜더링하는 용도로 사용된다.
2. 네추럴 템플릿
타임리프는 순수 HTML을 최대한 유지하는 특징이 있다. 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네추럴 템플릿이라 한다.
3. 스프링 통합 지원
타임리프는 스프링과 자연스럽게 통합되고,
스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.
Spring에서 Thymeleaf 사용하기
- 일단, html태그에서 Thymeleaf를 사용하려면
<html xmlns:th="http://www.thymeleaf.org">를 선언해주어야한다.
브라우저에 데이터 출력하기
- 태그에
th:text="${(데이터의 key값)}"사용 - 직접 출력하려면,
[[$((key값))]]
SpringEL 표현식
객체에 저장된 데이터 출력
th:text="${(객체명).(해당 프로퍼티)}"th:text="${(객체명).['(해당 프로퍼티)']}"th:text="${(객체명).(해당 getter함수)}"
ArrayList에 담은 데이터 출력
th:text="${(객체명)[index값].(해당 프로퍼티)}"th:text="${(객체명)[index값].['(해당 프로퍼티)']}"th:text="${(객체명)[index값].(해당 getter함수)}"
HashMap에 담은 데이터 출력
th:text="${(객체명)['key값'].(해당 프로퍼티)}"th:text="${(객체명)['key값'].['(해당 프로퍼티)']}"th:text="${(객체명)['key값'].(해당 getter함수)}"
지역변수
- 변수를 선언하여 데이터를 할당할 수 있다.
th:with="(변수명)=${객체명}"으로 변수 이름을 선언해주고,- 데이터를 할당할 부분에 변수이름으로
th:text="${변수이름.객체 프로퍼티}"를 할당할 수 있다.
url 링크 연결
th:href="@{/경로}"는 "/경로"로 링크를 연결한다.
-th:href="@{/경로(키값1=${키값1}, 키값2=${키값})}"은 서버에서 넘어온 request 파라미터값으로 경로 전달th:href="@{/경로/{param1}/{param2}(param1=${param1}, param2=${param2})}"는 데이터값의 경로로 패스를 만든다.th:href="@{/경로/{param1}(param1=${param1}, param2=${param2})}"
data1은 url로, data2는 파라미터 요청값으로 사용된다.
리터럴
th:text="'문자열' + '문자열'">을 보면, 문자열간 연산은 문자열의 나열이다.th:text="'문자열 ' + ${키값}"은 문자열과 할당값의 나열인데, 문자열
을 ''안에 두고 더하는 대신에 전체 값을 ||안에 할당해서 대체할 수 있다.
Thymeleaf의 연산
1. 산술 연산
th:text=""에 연산식을 할당하면 연산이 된다.
2. 비교 연산
다음과 같은 연산기호는 괄호 안의 약어로 표현가능하고 th:text=""안에 연산식을 비교해서 true, false를 출력한다.
>(gt),<(lt),>=(ge),<=(le),!=(not),==(eq),!=(neq, ne)
3. 조건식
th:text=""안에 삼항연산자를 할당했을때 true나 false일때 값을 출력한다.
3-1. Elvis 연산자
조건식의 축약된 버전으로 th:text=""안에 ${키값} ?: ' '형태로 할당해주고 조건식의 값의 존재여부에 따라 false일 때의 값은 생략해서 표현한다. ''(따옴표)부분은 _(언더바)형태로 바꾸고 태그안에 해당 문장을 넣는 방식도 있다.
4. 반복
자바의 for문이나 jstl의 foreach문과 유사한 기능으로 객체의 정보를 반복적으로 변수이름을 선언하여 테이블과 같은 형태에 할당해줄때 사용한다.
4-1.반복 상태를 확인할 수 있는 방법
- 반복의
두번째 파라미터를 설정해서 반복의 상태를 확인할 수 있다. 두번째 파라미터생략 가능하고, 생략하면 "지정한 변수명+ Stat"가 된다.- ${(2nd param).count} : 행의 값
- ${(2nd param).index} : index값
- ${(2nd param).size} : 배열의 크기값
- ${(2nd param).even} : 짝수행인지 판단
- ${(2nd param).odd} : 홀수 행인지 판단
- ${(2nd param).last} : 마지막 행인지 판단
- ${(2nd param).first} : 첫번째 행인지 판단
- ${(2nd param).current} : 현재 객체가 가지고 있는 주소값
5. 조건부 평가 (if, unless, switch)
th:if=""안의 값이 true인지 false인지 판단하고 true이면th:text=""의 값을 출력한다.- 반대로
th:unless=""의 경우는, 값이 false일 경우,th:text=""의 값을 출력한다. th:switch=""안의 할당값이th:case=""의 값을 만족하면 태그 안의 내용을 출력,th:case="*"은 그 밖의 조건일 때이다.
6. 주석과 블록
6-1. 주석
디자이너와 개발자 간에 서로 협업을 위해 다양한 주석형태를 참고할 필요가 있다.
- 개발자 영역
- 디자이너 영역
1) 표준 html 주석
<!-- <span th:text="${data}">html data</span> -->으로 표기 페이지 소스에서는 표기가능
2) 타임리프 파서 주석
- 한줄 주석
<!--/* [[${data}]] */--> - 여러줄 주석
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->3) 타임리프 프로토타입 주석
<!--/*/ <span th:text="${data}">html data</span> /*/-->6-2. 블록
<th:block>은 HTML태그가 아닌 타임리프의 유일한 자체 태그이다.
사용빈도가 높지는 않고 어쩔 수 없이 사용 될 때 사용한다.
- 보통 html에서는
<div>의 중첩구조로 표현하는데, 그렇게 사용을 원치 않을때 사용한다.
