Thymleaf - 기본 기능
Thymleaf 소개
- 타임리프 특징
- 서버 사이드 HTML 렌더링 (SSR) : 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용
- 네츄럴 템플릿 : 순수 HTML을 그대로 유지하면서 뷰 템플릿을 사용할 수 있다.
- 스프링 통합 지원
- 타임리프 사용 선언 <html xmlns:th="http://www.thymeleaf.org">
텍스트 - text, utext
<li>th:text 사용 <span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>- th:text => HTML 컨텐츠에 데이터를 출력할 때 사용한다.
- [[...]] => HTML 태그 속성이 아닌 HTML 컨텐츠 영역 안에서 직접 데이터를 출력하고 싶을 때 사용한다.
- ex) [[${data}]]
- HTML 문서는 < > 같은 특수 문자를 기반으로 정의되기에 특수 문자가 포함된 데이터를 출력할 때 조심해야 한다.
- HTML 엔티티 : 웹 브라우저는 < 를 HTML 태그의 시작으로 인식하기에 태그의 시작이 아닌 문자로 표현할 수 있는 방법이다.
- ex) < (<), >(>)
- Escape : HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것
- Unescape : Escape 기능을 사용하지 않을 때 사용하는 기능
- ex) th:text => th:utext
[[...]] => [(...)]
- ex) th:text => th:utext
- 기본으로 escape를 사용하고 꼭 필요할 때만 unescape를 사용하자.
변수 - SpringEL
- 변수 표현식 : ${...}
<h1>SpringEL 표현식</h1>
<ul>Object
<li>${user.username} = <span th:text="${user.username}"></span></li>
<li>${user['username']} = <span th:text="${user['username']}"></span></li>
<li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></li>
</ul>
<ul>List
<li>${users[0].username} = <span th:text="${users[0].username}"></span></li>
<li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span>
</li>
<li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span>
</li>
</ul>
<ul>Map
<li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
<li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
<li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
</ul>- SpringEL 표현식
- 프로퍼티 접근 => 변수명.필드명
- 변수명['필드명']
- 문자를 그대로 넣기에 동적으로 활용하기에 좋다.
- 변수명.getter 호출
- 모두 다 사용 가능하며 결과는 같다.
- List의 경우에도 인덱스로 객체를 찾아서 필드 값을 읽어올 수 있다.
Map의 경우에도 key 값으로 객체를 찾아서 필드 값을 읽어올 수 있다.
<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>- th:with => 지역 변수를 선언해서 사용할 수 있다.
- 선언한 태그 안에서만 사용할 수 있다.
- 예제의 경우 지역 변수 first를 선언해서 List user[0]의 값을 대입 후 사용한다.
기본 객체들
- 타임리프가 제공하는 기본 객체
- ${#request}
- ${#response}
- ${#session}
- ${#servletContext}
- ${#locale}
- ★스프링 3.0 부터는 ${#locale}을 제외한 객체들을 지원하지 않기에 Model에 직접 추가해서 사용해야 한다.★
- 타임리프가 제공하는 편의 객체
- HTTP 요청 파라미터 접근 : param.변수명
- ex) ${param.paramData}
- HTTP 세션 접근 : session.변수명
- ex) ${session.sessionData}
- ㄹ스프링 빈 접근 : @스프링빈이름.변수명
- ex) ${@helloBean.hello('Spring!')}
- HTTP 요청 파라미터 접근 : param.변수명
유틸리티 객체와 날짜
- 타임리프에서 제공하는 유틸리티 객체
- #message : 메시지, 국제화 처리
- #uris : URI 이스케이프 지원
- #dates : java.util.Date 서식 지원
- #calendars : java.util.Calendar 서식 지원
- #temporals : 자바8 날짜 서식 지원
- #numbers : 숫자 서식 지원
- #strings : 문자 관련 편의 기능
- #objects : 객체 관련 기능 제공
- #bools : boolean 관련 기능 제공
- #arrays : 배열 관련 기능 제공
- #lists , #sets , #maps : 컬렉션 관련 기능 제공#ids : 아이디 처리 관련 기능 제공
- 자바에서 날짜 LocalDate, LocalDateTime, Instant를 사용하려면 추가 라이브러리가 필요한데 스프링 부트 타임리프 사용 시 자동으로 추가된다.
- 자바 날짜용 유틸리티 객체 : #temporals
- 포맷팅도 가능하다.
URL 링크
- 타임리프 URL 링크 : @{...}
- 단순 URL
- ex) @{/hello} => /hello
- 쿼리 파라미터
- ex) @{/hello(param1=${param1}, param2=${param2})} => /hello?param1=data1¶m2=data2
- ()에 있는 부분은 쿼리 파라미터로 처리된다.
- 경로 변수
- ex) @{/hello/{param1}/{param2}(param1=${param1}, param2={param2})} => /hello/data1/data2
- URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.
- 경로 변수 + 쿼리 파라미터
- ex) @{/hello/{param1}(param1=${param1}, param2=${param2})} => /hello/data1?param2=data2
- 경로 변수로 처리할 수 있는 것은 하고 나머지는 쿼리 파라미터로 처리된다.
- 단순 URL
- 절대 경로 / 상대 경로
- ex) /hello : 절대 경로
- ex) hello : 상대 경로
리터럴 (Literals)
- 리터럴 : 소스 코드상에 고정된 값을 말하는 용어다.
String a = "hello";
int a = 10 * 20;- hello는 문자 리터럴
- 10, 20은 숫자 리터럴
- 타임리프의 리터럴
- 문자 : 'hello'
- 기본적으로 문자 리터럴은 항상 '(작은 따옴표)로 감싸야 한다.
- 항상 문자를 '로 감싸는 것은 귀찮기에 공백 없이 이어진다면 하나의 의미 있는 토큰으로 인식해서 작은 따옴표를 생략할 수 있다.
- 룰: A-Z , a-z , 0-9 , [] , . , - , _
- ex) th:text="'hello'"가 원칙이나 th:text="hello" 처럼 이어지는 경우 생략해도 된다.
- hello world!의 경우 공백이 있기에 토큰으로 인식되지 않는다. => th:text="'hello world!'" 처럼 '로 감싸줘야한다.
- 숫자 : 10
- 불린 : true, false
- null : null
- 문자 : 'hello'
<li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
<li>'hello world!' = <span th:text="'hello world!'"></span></li>
<li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>
<li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>- 리터럴 표현 방식
- '리터럴1' + '리터럴2'
- '리터럴1리터럴2'
- '리터럴1' + 변수
- 리터럴 대체 - |리터럴1 변수| (리터럴 대체 문법은 공백 사용 가능)
연산
- 타임리프에서 연산을 사용 시 HTML 엔티티를 사용하는 부분만 조심하면 된다.
<li>산술 연산
<ul>
<li>10 + 2 = <span th:text="10 + 2"></span></li>
<li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
</ul>
</li>
<li>비교 연산
<ul>
<li>1 > 10 = <span th:text="1 > 10"></span></li>
<li>1 gt 10 = <span th:text="1 gt 10"></span></li>
<li>1 >= 10 = <span th:text="1 >= 10"></span></li>
<li>1 ge 10 = <span th:text="1 ge 10"></span></li>
<li>1 == 10 = <span th:text="1 == 10"></span></li>
<li>1 != 10 = <span th:text="1 != 10"></span></li>
</ul>
</li>
<li>조건식
<ul>
<li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)? '짝수':'홀수'"></span></li>
</ul>
</li>
<li>Elvis 연산자
<ul>
<li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"></span></li>
<li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?: '데이터가 없습니다.'"></span></li>
</ul>
</li>
<li>No-Operation
<ul>
<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>
<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li>
</ul>
</li>- 부호를 포함한 특수 문자들은 HTML 엔티티로 표현해도 되고 특수 문자 그대로 표현해도 된다.
- 비교 연산
- >(gt), <(lt), >=(ge), <=(le), !(not), ==(eq), !=(neq, ne)
- Elvis 연산자 (엘비스 연산자) : 조건식의 편의 버전
- 변수에 값이 있으면 변수 값을 출력하고 없으면 ?: 뒤에 값을 출력한다.
- No-Operation : _ 인 경우 타임리프가 실행되지 않는 것처럼 동작한다.
- ex) nullData 변수가 null인 경우 {nullData} ?: _ 를 수행하면 타임리프의 th 태그가 실행되는 것이 아닌 일반 HTML 태그가 실행된다.
속성 값 설정
- 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다.
- th:*로 기존 속성을 대체한다.
- 기존 속성이 없다면 새로 만든다.
- <input type="text" name="mock" th:name="userA" />
=> 타임리프 렌더링 후 <input type="text" name="userA" />
- th:attrappend = <input type="text" class="text" th:attrappend="class='large'"/><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large'"/><br/>
- th:classappend = <input type="text" class="text" th:classappend="large"/><br/>- th:attrappend는 기존 class 속성 값의 뒤에 값을 추가한다.
- ex) 기존 class = text, th:attrappend=class=' large' 일 때 text large가 된다.
- th:attrprepend는 기존 class 속성 값의 앞에 값을 추가한다.
- checked o <input type="checkbox" name="active" th:checked="true"/><br/>
- checked x <input type="checkbox" name="active" th:checked="false"/><br/>
- checked=false <input type="checkbox" name="active" checked="false"/><br/>- HTML에서는 checked 속성이 존재하기만 해도 값과 상관없이 체크 처리가 된다.
- th:checked는 false인 경우 checked 속성 자체를 제거한다.
반복
- 타임리프에서 반복은 th:each를 사용한다.
<tr th:each="user : ${users}">
<td th:text="${user.username}">username</td>
<td th:text="${user.age}">0</td>
</tr>- 반복 시 오른쪽 컬렉션 ${users}의 값을 하나씩 꺼내서 왼쪽 변수 user에 담아서 태그를 반복 실행한다.
- th:each는 List, 배열, Iterable, Enumeration 등을 구현한 모든 객체를 반복에 사용할 수 있다.
- Map을 사용하는 경우 Entry 값이 담기게 된다.
<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>- th:each에 두 번째 파라미터를 지정하면 반복의 상태를 확인할 수 있다.
- 생략하는 경우 지정한 변수명(user) + Stat으로 된다. => userStat
- 반복 상태 유지 기능
- index : 0부터 시작하는 값
- count : 1부터 시작하는 값
- size : 전체 사이즈
- even, odd : 홀수 / 짝수 여부 (boolean)
- first, last : 처음 / 마지막 여부 (boolean)
- current : 현재 객체
조건부
- if, unless
- 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다.
- unless는 if의 반대로 조건을 만족하지 않는(false) 경우 렌더링한다.
- switch
- *은 만족하는 조건이 없을 때 사용하는 디폴트 값이다.
주석
<body>
<h1>예시</h1>
<span th:text="${data}">html data</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->
<h1>2. 타임리프 파서 주석</h1>
<!--/* [[${data}]] */-->
<!--/*-->
<span th:text="${data}">html data</span>
<!--*/-->
<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/-->
</body>- 주석의 종류
- 표준 HTML 주석 <!-- -->
- 타임리프가 렌더링하지 않고 그대로 남겨둔다.
- 타임리프 파서 주석 <!--/* */-->
- 타임리프의 진짜 주석으로 렌더링에서 주석 부분을 제거한다.
- 타임리프 프로토타입 주석 <!-- /*/ /*/-->
- HTML 파일을 웹 브라우저에서 열면 렌더링하지 않지만 타임리프 렌더링을 거치면 정상적으로 렌더링된다.
=> HTML 파일을 그대로 열면 주석처리, 타임리프 렌더링을 하면 보이는 기능
- HTML 파일을 웹 브라우저에서 열면 렌더링하지 않지만 타임리프 렌더링을 거치면 정상적으로 렌더링된다.
- 표준 HTML 주석 <!-- -->
블록
- <th:block>은 HTML 태그가 아닌 타임리프의 유일한 자체 태그이다.
<th:block th:each="user : ${users}">
<div>
사용자 이름1 <span th:text="${user.username}"></span>
사용자 나이1 <span th:text="${user.age}"></span>
</div>
<div>
요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
</div>
</th:block>- 기본적으로 th:each로 반복을 하면 <div> 블록 내에서 반복을 하고 마친 다음 다른 <div> 블록을 반복하지만 th:block은 반복을 하며 여러 <div> 블록을 번갈아 실행할 수 있다.
- 일반적인 반복으로 해결하기 어려운 경우 사용한다.
자바스크립트 인라인
- 타임리프는 자바스크립트에서 타임리프를 변리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
- 자바스크립트 인라인 기능 적용
- <script th:inline="javascript">
<!-- 자바스크립트 인라인 사용 전 -->
<script>
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>
<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
var username = [[${user.username}]];
var age = [[${user.age}]];
//자바스크립트 내추럴 템플릿
var username2 = /*[[${user.username}]]*/ "test username";
//객체
var user = [[${user}]];
</script>
</body>- 텍스트 렌더링 ex) var username = [[${user.username}]];
- 인라인 사용 전 => var username = userA;
- 인라인 사용 후 => var username = "userA";
- 인라인을 사용하면 문자 타입인 경우 "를 포함해준다.
- 자바스크립트 내추럴 템플릿 ex) var username = /*[[${user.username}]]*/ "test username";
- 인라인 사용 전 => var username = /*userA*/ "test username";
- 인라인 사용 전에는 결과를 순수하게 해석했기에 내추럴 템플릿이 동작하지 않았다.
- 인라인 사용 후 => var username = "userA";
- 인라인 사용 후에는 주석 부분이 제거되고 내추럴 템플릿이 동작하며 기대한 결과가 나오게 된다.
- 인라인 사용 전 => var username = /*userA*/ "test username";
- 객체 ex) var user = [[${user}]];
- 인라인 사용 전 => var user = BasicController.User(username=userA, age=10);
- toString()이 호출된 값이 나온다.
- 인라인 사용 후 => var user = {"username":"userA", "age":10};
- 객체를 JSON으로 변환해준다.
- 인라인 사용 전 => var user = BasicController.User(username=userA, age=10);
<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
[# th:each = "user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>- [#] 안에 th:each 문법 사용
템플릿 조각
- 웹 페이지 개발 시 공통으로 필요한 영역들을 지원하기 위한 기능으로 템플릿 조각과 레이아웃을 지원한다.
<!-- fragmentMain -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>부분 포함</h1>
<h2>부분 포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div>
<h2>부분 포함 단순 표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>
<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>
</body>
</html><!-- footer -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="copy">
푸터 자리 입니다.
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p>파라미터 자리 입니다.</p>
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer>
</body>
</html>- template/fragment/footer :: copy는 template/fragment/footer.html 템플릿의 th:fragment="copy" 부분을 템플릿 조각으로 가져와서 사용한다는 의미.
- 부분 포함 insert
- th:insert는 현재 태그 내부에 템플릿 조각을 추가한다.
- 부분 포함 replace
- th:replace는 현재 태그를 템플릿 조각으로 대체한다.
- 부분 포함 단순 표현식
- ~{...}를 사용하는 것이 템플릿 조각을 사용할 때 원칙이지만 템플릿 조각을 사용하는 코드가 단순한 경우 ~{}를 생략할 수 있다.
- 파라미터를 전달해서 동적으로 템플릿 조각을 렌더링할 수 있다.
템플릿 레이아웃
- 템플릿 조각은 큰 틀에 일부 코드 조각을 가지고와서 사용했다면 템플릿 레이아웃은 반대로 큰 틀을 가져와서 사용하는 방식
<!-- layoutMain -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>메인 타이틀</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
</html><!-- base -->
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">레이아웃 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!-- 추가 -->
<th:block th:replace="${links}"/>
</head>- layoutMain.html을 렌더링하면 <head th:replace="template/layout/base :: common_header(~{::title},~{::link})"> 이 부분에 의해서 base.html의 common_header로 교체된다.
- base.html이 기본 레이아웃, 틀로 두고 변경, 추가 등 필요한 코드 조각을 전달해서 완성하는 방식
- common_header(~{::title},~{::link}) 이 부분이 핵심
- ::title은 현재 페이지의 title 태그들을 전달한다.
- ::link는 현재 페이지의 link 태그들을 전달한다.
- 템플릿 레이아웃의 개념은 템플릿 조각과 같으나 조금 더 확장한 개념이다.
<!DOCTYPE html>
<html th:fragment="layout (title, content)" xmlns:th="http://www.thymeleaf.org">
<head>
<title th:replace="${title}">레이아웃 타이틀</title>
</head>
<body>
<h1>레이아웃 H1</h1>
<div th:replace="${content}">
<p>레이아웃 컨텐츠</p>
</div>
<footer>
레이아웃 푸터
</footer>
</body>
</html>- <html> 태그 자체에 th:fragment로 레이아웃을 지정하면 해당 파일을 기본으로 하고 필요한 내용을 전달해서 부분부분 변경하는 형태로 만들 수 있다.
출처 : [인프런 김영한 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술]
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 강의 | 김영한 - 인프런
김영한 | 웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습
www.inflearn.com
'Spring > [인프런 김영한 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술]' 카테고리의 다른 글
| [인프런 김영한 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술] 로그인 처리 - 쿠키, 세션 (4) | 2024.10.15 |
|---|---|
| [인프런 김영한 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술] 검증 - Bean Validation (1) | 2024.10.14 |
| [인프런 김영한 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술] 검증 - Validation (4) | 2024.10.14 |
| [인프런 김영한 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술] 메시지, 국제화 (8) | 2024.10.11 |
| [인프런 김영한 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술] 타임리프 - 스프링 통합과 폼 (2) | 2024.10.11 |
