타임리프 특징
- 서버 사이드 HTML 렌더링 (SSR)
- 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용됩니다.
- 네츄럴 템플릿
- 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 합니다.
(웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인가능)
- 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 합니다.
- 스프링 통합 지원
- 타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원합니다.
타임리프의 기본 표현식
• 간단한 표현:
◦ 변수 표현식: ${...}
◦ 선택 변수 표현식: *{...}
◦ 메시지 표현식: #{...}
◦ 링크 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: _타임리프의 기본기능
텍스트 - text, utext
타임리프는 기본적으로 HTML 테그의 속성에 기능을 정의해서 동작합니다.
HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이 th:text 를 사용하면 됩니다.
<span th:text="${data}">
HTML 태그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]] 를 사용하면 됩니다.
컨텐츠 안에서 직접 출력하기 = [[${data}]]
escape 와 unescape
- HTML 엔티티
웹브라우저는 < 를 HTML 태그의 시작으로 인식 합니다.
따라서 < 를 태그의 시작이 아니라 문자로 표현할수 있는 방법이 필요한데, 이것을 HTML 엔티티라 합니다.
그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 합니다.
타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공합니다.
예) < → &It; , > → >
예를들어서 <b>spring<b> 를 html태그를 생각하면 굵은 글씨로 표기되는것이 맞습니다. 하지만, 내 의도가 <b> 문자를 그대로 보이고 싶어하는 것이라면 이스케이프를 사용하면 된다는 것이고, 타임리프는 이스케이프가 디폴트 설정이기 때문에 그냥 적으면 됩니다.
→ 아니 그러면 문자 보이는거 말고 태그를 적용시키려면 어떻게 하는데요? unescaped를 참고하자
- unescape
타임리프는 다음 두 기능을 제공합니다.
- th:text / th:utext
- [[...]] [(...)] // 안에 괄호가 다르다 !
@GetMapping("/text-unescaped")
public String textUnescaped(Model model) {
model.addAttribute("data", "Hello <b>Spring!</b>"); //데이터에 b 태그 삽입, usescape 안하면 문자열 그대로 보이게 된다.
return "basic/text-unescaped";
}
<body>
<h1>text vs utext</h1>
<ul>
<li>th:text = <span th:text="${data}"></span></li>
<li>th:utext = <span th:utext="${data}"></span></li>
</ul>
<h1><span th:inline="none">[[...]] vs [(...)]</span></h1>
<ul>
<li><span th:inline="none">[[...]] = </span>[[${data}]]</li> // escape 기본 문자열 출력 Hello <b>Spring!</b>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li> // unescape b태그 출력 Hello **Spring!**
</ul>
</body>
주의! 실제 서비스를 개발하다 보면 escape를 사용하지 않아서 html이 정상 렌더링 되지 않는 문제가 발생합니다.
escape를 기본으로 하고, 꼭 필요할 때만 unescape를 사용하자 ! ( 게시판만들때 보통 사용 )
변수 - SpringEL
타임리프에서 변수를 사용할 때는 변수 표현식을 사용합니다.
변수 표현식 : ${...}
이 변수 표현식에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있습니다.
아래 예시를 통해 기본 Object 변수와, List, Map 을 표현하는 방법을 알아봅시다.
<h1>SpringEL 표현식</h1> <ul>Object
<li>${user.username} = <span th:text="${user.username}"></span></li> // 원래는 .getusername 으로 사용하는걸 간소화, 만능임
<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> // List도 마찬가지, 인덱스사용
<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> //map도 마찬가지, 키 값사용
<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>
<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}"> // first라는 지역변수 선언. 지역변수라서 선언한 태그내에서만 유효함.
<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p> </div>
기본 객체들
타임리프는 기본 객체들을 제공합니다.
- ${#request} - 스프링 부트 3.0부터 제공하지 않는다.
- ${#response} - 스프링 부트 3.0부터 제공하지 않는다.
- ${#session} - 스프링 부트 3.0부터 제공하지 않는다.
- ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.
- ${#locale}
스프링 부트 3.0부터 대부분이 지원안되지만, 편의 객체들은 지원한다 !
현재 저는 2.75 버전을 사용하고 있으니 기존에 썼던 코드를 적고, 3.0 이후의 코드들도 아래에 예시를 두었습니다..
--BasicController--
@GetMapping("/basic-objects")
public String basicObjects(HttpSession session) {
session.setAttribute("sessionData", "Hello Session");
return "basic/basic-objects";
}
@Component("helloBean")
static class HelloBean {
public String hello(String data) {
return "Hello " + data;
} }
--타임리프 템플릿--
<h1>식 기본 객체 (Expression Basic Objects)</h1> <ul>
<li>request = <span th:text="${#request}"></span></li>
<li>response = <span th:text="${#response}"></span></li>
<li>session = <span th:text="${#session}"></span></li>
<li>servletContext = <span th:text="${#servletContext}"></span></li>
<li>locale = <span th:text="${#locale}"></span></li>
</ul>
<h1>편의 객체</h1> <ul> //편의객체 표현방식은 3.0버전이후도 똑같다 !
<li>Request Parameter = <span th:text="${param.paramData}"></span></li>
<li>session = <span th:text="${session.sessionData}"></span></li>
<li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></li> </ul>
</body>
</html>
3.0 이후에 작성 코드
**BasicController**
@GetMapping("/basic-objects")
public String basicObjects(Model model, HttpServletRequest request,
HttpServletResponse response, HttpSession session) {
session.setAttribute("sessionData", "Hello Session");
model.addAttribute("request", request);
model.addAttribute("response", response);
model.addAttribute("servletContext", request.getServletContext());
return "basic/basic-objects";
}
@Component("helloBean")
static class HelloBean {
public String hello(String data) {
return "Hello " + data;
} }
**타임리프**
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>식 기본 객체 (Expression Basic Objects)</h1> <ul>
<li>request = <span th:text="${request}"></span></li>
<li>response = <span th:text="${response}"></span></li>
<li>session = <span th:text="${session}"></span></li>
<li>servletContext = <span th:text="${servletContext}"></span></li>
<li>locale = <span th:text="${#locale}"></span></li>
</ul>
<h1>편의 객체</h1> <ul> //편의객체는 이전버전과 똑같이 사용가능하다.
<li>Request Parameter = <span th:text="${param.paramData}"></span></li>
<li>session = <span th:text="${session.sessionData}"></span></li>
<li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></li> </ul>
</body>
</html>
유틸리티 객체와 날짜
타임리프는 문자, 숫자, 날짜, URI등을 편리하게 다루는 다양한 유틸리티 객체들을 제공합니다.
필요할 때마다 아래에서 찾아서 사용하자 ! 아래에 없는 것들은 추가로 첨부된 타임리프 공식문서를 참고하자.
타임리프 유틸리티 객체들
- #message : 메시지, 국제화 처리
- #uris : URI 이스케이프 지원
- #dates : java.util.Date 서식 지원
- #calendars : java.util.Calendar 서식 지원
- #temporals : 자바8 날짜 서식 지원
- #numbers : 숫자 서식 지원
- #strings : 문자 관련 편의 기능
- #objects : 객체 관련 기능 제공
- #bools : boolean 관련 기능 제공
- #arrays : 배열 관련 기능 제공
- #lists , #sets , #maps : 컬렉션 관련 기능 제공
- #ids : 아이디 처리 관련 기능 제공, 뒤에서 설명
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utility-objects
Tutorial: Using Thymeleaf
1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a
www.thymeleaf.org
예시코드
BasicController
@GetMapping("/date")
public String date(Model model) {
model.addAttribute("localDateTime", LocalDateTime.now());
return "basic/date";
}
타임리프
<ul>
<li>default = <span th:text="${localDateTime}"></span></li> // 디폴트 값 , 아래에 포맷형식을 가장 많이 씀
<li>yyyy-MM-dd HH:mm:ss = <span th:text="${#temporals.format(localDateTime,'yyyy-MM-dd HH:mm:ss')}"></span></li>
</ul>
URL 링크 ***
타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 됩니다.
예시코드
**BasicController**
@GetMapping("link")
public String link(Model model) {
model.addAttribute("param1", "data1");
model.addAttribute("param2", "data2");
return "basic/link";
}
**타임리프**
<body>
<h1>URL 링크</h1>
<ul>
<li><a th:href="@{/hello}">basic url</a></li> // 단순한 URL
<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li> // 쿼리파라미터
<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li> // 경로변수
<li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
//경로변수+쿼리파라미터
</ul>
</body>
단순한 URL
- @{/hello} /hello
쿼리 파라미터
- @{/hello(param1=${param1}, param2=${param2})} → /hello?param1=data1¶m2=data2
- () 에 있는 부분은 쿼리 파라미터로 처리된다.
경로 변수
- @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})} → /hello/data1/data2
- URL 경로상에 변수가 있으면 () 부분은 경로 변수로 처리된다.
경로 변수 + 쿼리 파라미터
- @{/hello/{param1}(param1=${param1}, param2=${param2})}
→ /hello/data1?param2=data2 - 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.
상대경로, 절대경로, 프로토콜 기준을 표현할 수 도 있다.
- /hello : 절대 경로
- hello : 상대 경로
리터럴
리터럴은 소스 코드상에 고정된 값을 말하는 용어입니다.
예를 들어서 다음 코드에서 "Hello" 는 문자 리터럴, 10 , 20 는 숫자 리터럴이다.
String a = "Hello"
int a = 10 * 20
타임리프는 다음과 같은 리터럴이 있다.
- 문자: 'hello'
- 숫자: 10
- 불린: true , false
- null: null
타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 합니다. <span th:text="'hello'">
그런데 문자를 항상 ' 로감싸는것은 너무 귀찮은 일입니다. 공백없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이
작은 따옴표를 생략할 수 있습니다.
룰: A-Z, a-z, 0-9, [], ., -, _
- <span th:text="hello"> // hello라는 문자가 이어져 있으니 생략을 해도 된다.
오류예시
<span th:text="hello world!"></span> 문자 리터럴은 원칙상 ' 로 감싸야 한다. 중간에 공백이 있어서 하나의 의미있는 토큰으로도 인식되지 않는다.
<span th:text="'hello world!'"></span> 이렇게 ' 로 감싸면 정상 동작한다.
<body> <h1>리터럴</h1>
<ul>
<!-- <li>"hello world!" = <span th:text="hello world!"></span></li> --> // 작은 따옴표가 없어서 리터럴 오류가 발생
<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> //리터럴 대체문법 (더하기나 작은따옴표 생략가능)
</ul>
</body>
연산
타임리프 연산은 자바와 크게 다르지 않습니다. HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하면 됩니다.
- 비교연산: HTML 엔티티를 사용해야 하는 부분을 주의하자
> (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)
- 조건식: 자바의 조건식과 유사하다.
- Elvis 연산자: 조건식의 편의 버전
- No-Operation: _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작한다. 이것을 잘 사용하면 HTML의 내용 그대로 활용할 수 있다. 마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력된다.
아래 이미지의 적힌 연산을 예시 코드를 통해 구현해보았습니다.
<body> <ul>
<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> // < 와 > 은 html 엔티티를 사용해서 비교연산을 수행한다.
<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 //Elvis연산자이랑 다르게 operation을 하지않고 타임리프 태그 효과없이 기본 글귀가 출력된다.
// nullData 조건문 치환을 무시하고 html글씨 그대로 출력된다는 뜻**
<ul>
<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>
<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li>
</ul> </li>
</ul>
</body>
출처
https://www.inflearn.com/roadmaps/373
우아한형제들 최연소 기술이사 출신 김영한의 스프링 완전 정복 로드맵 - 인프런
Spring, MVC 스킬을 학습할 수 있는 개발 · 프로그래밍 로드맵을 인프런에서 만나보세요.
www.inflearn.com
