- 타임리프 특징
1. 서버 사이드 HTML 렌더링 (SSR)
2. 네츄럴 템플릿
3. 스프링 통합 지원
- 서버 사이드 HTML 렌더링 (SSR)
1. 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다.
- 네츄럴 템플릿
1. 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징을 네츄럴 템플릿 (natural templates)이라 한다.
- 스프링 통합 지원
1. 타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.
- 기본 표현식
• 간단한 표현:
◦ 변수 표현식: ${...}
◦ 선택 변수 표현식: *{...}
◦ 메시지 표현식: #{...}
◦ 링크 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, utex
- 타임리프는 기본적으로 HTML 테그의 속성에 기능을 정의해서 동작한다. HTML의 콘텐츠(content)에 데이터를 출력할 때는 다음과 같이 th:text 를 사용하면 된다.
<span th:text="${data}">- HTML 테그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]] 를 사용하면 된다.
컨텐츠 안에서 직접 출력하기 = [[${data}]]
@GetMapping("text-basic")
public String textBasic(Model model) {
model.addAttribute("data", "Hello Spring!");
return "basic/text-basic";
}<h1>컨텐츠에 데이터 출력하기</h1>
<ul>
<li>th:text 사용 <span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>- Escape
- HTML 엔티티
1. HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 한다.
Hello <b>Spring!</b>웹 브라우저에서 위와 같이 결과가 나오며
Hello <b>Spring!</b>소스를 보게되면 위와 같이 HTML 태그가 변경된 것을 알 수 있다.
@GetMapping("text-unescaped")
public String textUnescaped(Model model) {
model.addAttribute("data", "Hello <b>Spring!</b>");
return "basic/text-unescaped";
}<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>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li>
</ul>
- 위와 같이 타임리프를 utext를 설정하거나, [(...)}를 사용하여 unescape를 통해 태그가 표현되지 않도록 할 수 있다.
- 변수 - SpringEL
변수 표현식 : ${...}@GetMapping("/variable")
public String variable(Model model) {
User userA = new User("userA", 10);
User userB = new User("userB", 20);
List<User> list = new ArrayList<>();
list.add(userA);
list.add(userB);
Map<String, User> map =new HashMap<>();
map.put("userA", userA);
map.put("userB", userB);
model.addAttribute("user", userA);
model.addAttribute("users", list);
model.addAttribute("userMap", map);
return "basic/variable";
}<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>
<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>- Object
1. user.username : user의 username을 프로퍼티 접근 -> user.getUsername()
2. user['username'] : 위와 같음 -> user.getUsername()
3. user.getUsername() : user의 getUsername() 을 직접 호출
- List
1. users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 -> list.get(0).getUsername()
2. users[0]['username'] : 위와 같음
3. users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출
- Map
1. userMap['userA'].username : Map에서 userA를 찾고, username 프로퍼티 접근 -> map.get("userA").getUsername()
2. userMap['userA']['username'] : 위와 같음
3. userMap['userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출
- 지역 변수 선언
1. th:with 를 사용하면 지역 변수를 선언해서 사용할 수 있다. 지역 변수는 선언한 테그 안에서만 사용할 수 있다.
- 기본 객체들
@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;
}
}- 세션과 Bean을 통한 검색도 확인해보기 위해 위와 같이 @GetMapping으로 session에 값을 지정하고, @Component를 통해 빈을 등록한다.
<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>http://localhost:8080/basic/basic-objects?paramData=HelloParamURI를 통해 파라미터 값을 넘겨준다.
- 타임리프는 기본 객체들을 제공한다.
1. ${#request} - 스프링 부트 3.0부터 제공하지 않는다.
2. ${#response} - 스프링 부트 3.0부터 제공하지 않는다.
3. ${#session} - 스프링 부트 3.0부터 제공하지 않는다.
4. ${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.
5. ${#locale}
- #request 는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data") 처럼 불편하게 접근해야 한다.
- 이런 점을 해결하기 위해 편의 객체도 제공한다.
1. HTTP 요청 파라미터 접근: param
1. 예) ${param.paramData}
2. HTTP 세션 접근: session
1. 예) ${session.sessionData}
3. 스프링 빈 접근: @
1. 예) ${@helloBean.hello('Spring!')}
- 유틸리티 객체와 날짜
- URL 링크
- 타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다
@GetMapping("link")
public String link(Model model) {
model.addAttribute("param1", "data1");
model.addAttribute("param2", "data2");
model.addAttribute("url1", "abc");
model.addAttribute("url2", "def");
return "basic/link";
}<h1>URL 링크</h1>
<ul>
<li><a th:href="@{/hello}">basic url</a></li>
<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>
<li><a th:href="@{/hello/{url1}/{url2}(url1=${url1}, url2=${url2}, param1=${param1}, param2=${param2})}">path variable + query parameter 2</a></li>
</ul>- 단순한 URL
1. @{/hello} /hello
- 쿼리 파라미터
1. @{/hello(param1=${param1}, param2=${param2})} -> /hello?param1=data1¶m2=data2
1. () 에 있는 부분은 쿼리 파라미터로 처리된다.
- 경로 변수
1. @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})} -> /hello/data1/data2
1. URL 경로상에 변수가 있으면 () 부분은
- 경로 변수로 처리된다. 경로 변수 + 쿼리 파라미터
1. @{/hello/{param1}(param1=${param1}, param2=${param2})} -> /hello/data1?param2=data2
1. 경로 변수와 쿼리 파라미터를 함께 사용할 수 있다.
- 상대경로, 절대경로, 프로토콜 기준을 표현할 수 도 있다.
1. /hello : 절대 경로
2. hello : 상대 경로
- 리터럴
- 타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다.
<span th:text="'hello'">- 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이 작은 따옴표를 생략할 수 있다
@GetMapping("/literal")
public String literal(Model model) {
model.addAttribute("data", "Spring!");
return "basic/literal";
}<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>- 리터럴 대체(Literal substitutions)
<span th:text="|hello ${data}|">- 마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것 처럼 편리하다.
- 연산
@GetMapping("/operation")
public String operation(Model model) {
model.addAttribute("nullData", null);
model.addAttribute("data", "Spring!");
return "basic/operation";
}<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>
<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>
</ul>
</body>1. 비교연산: HTML 엔티티를 사용해야 하는 부분을 주의하자,
1. > (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)
2. 조건식: 자바의 조건식과 유사하다.
3. Elvis 연산자: 조건식의 편의 버전
4. No-Operation: _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작한다. 이것을 잘 사용하면 HTML 의 내용 그대로 활용할 수 있다. 마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력된다.
- 속성 값 설정
- 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다.
@GetMapping("/attribute")
public String attribute() {
return "basic/attribute";
}<body>
<h1>속성 설정</h1>
<input type="text" name="mock" th:name="userA" />
<h1>속성 추가</h1>
- 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/>
<h1>checked 처리</h1>
- 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/>
</body>- 속성 설정
1. th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체한다. 기존 속성이 없다면 새로 만든다.
<input type="text" name="mock" th:name="userA" />-> 타임리프 렌더링 후
<input type="text" name="userA" />- 속성 추가
1. th:attrappend : 속성 값의 뒤에 값을 추가한다.
2. th:attrprepend : 속성 값의 앞에 값을 추가한다.
3. th:classappend : class 속성에 자연스럽게 추가한다.
- checked 처리
HTML에서는
<input type="checkbox" name="active" checked="false" />-> 이 경우에도 checked 속성이 있기 때문에 checked 처리가 되어버린다.
- HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 된다. 이런 부분이 true , false 값을 주로 사용하는 개발자 입장에서는 불편하다.
- 타임리프의 th:checked 는 값이 false 인 경우 checked 속성 자체를 제거한다.
<input type="checkbox" name="active" th:checked="false" />타임리프 렌더링 후:
<input type="checkbox" name="active" /- 반복
@GetMapping("/each")
public String each(Model model) {
addUsers(model);
return "basic/each";
}
private void addUsers(Model model) {
List<User> list = new ArrayList<>();
list.add(new User("userA", 10));
list.add(new User("userB", 20));
list.add(new User("userC", 30));
model.addAttribute("users", list);
}<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>기본 테이블</h1>
<table border="1">
<tr>
<th>username</th>
<th>age</th>
</tr>
<tr th:each="user : ${users}">
<td th:text="${user.username}">username</td>
<td th:text="${user.age}">0</td>
</tr>
</table>
<h1>반복 상태 유지</h1>
<table border="1">
<tr>
<th>count</th>
<th>username</th>
<th>age</th>
<th>etc</th>
</tr>
<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>
</table>
</body>
</html>- 반복기능
1. <tr th:each="user : ${users}">
2. 반복시오른쪽컬렉션(${users})의값을하나씩꺼내서왼쪽변수(user)에담아서태그를반복실행합니다.
- 반복상태유지
1. <tr th:each="user, userStat : ${users}">
2. 반복의두번째파라미터를설정해서반복의상태를확인할수있습니다.
3. 두번째파라미터는생략가능한데, 생략하면지정한변수명(user) +Stat가됩니다.\
4. 여기서는user +Stat =userStat이므로생략가능합니다.
- 반복상태유지기능
1. index: 0부터시작하는값
2. count: 1부터시작하는값
3. size: 전체사이즈
4. even,odd: 홀수, 짝수여부(boolean)
5. first,last:처음, 마지막여부(boolean)
6. current: 현재객체
- 조건부평가
- if,unless(if의반대)
@GetMapping("/condition")
public String condition(Model model) {
addUsers(model);
return "basic/condition";
}<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>if, unless</h1>
<table border="1">
<tr>
<th>count</th>
<th>username</th>
<th>age</th>
</tr>
<tr th:each="user, userStat : ${users}">
<td th:text="${userStat.count}">1</td>
<td th:text="${user.username}">username</td>
<td>
<span th:text="${user.age}">0</span>
<span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
<span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
</td>
</tr>
</table>
<h1>switch</h1>
<table border="1">
<tr>
<th>count</th>
<th>username</th>
<th>age</th>
</tr>
<tr th:each="user, userStat : ${users}">
<td th:text="${userStat.count}">1</td>
<td th:text="${user.username}">username</td>
<td th:switch="${user.age}">
<span th:case="10">10살</span>
<span th:case="20">20살</span>
<span th:case="*">기타</span>
</td>
</tr>
</table>
</body>
</html>- if, unless
1. 타임리프는해당조건이맞지않으면태그자체를렌더링하지않는다.
2. 만약다음조건이false인경우<span>...<span>부분자체가렌더링되지않고사라진다.
3. <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
- switch
1. *은만족하는조건이없을때사용하는디폴트이다.
- block
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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>
</body>
</html>- 자바스크립트인라인
- .<script th:inline="javascript">
@GetMapping("/javascript")
public String javascript(Model model) {
model.addAttribute("user", new User("userA", 10));
addUsers(model);
return "basic/javascript";
}<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 자바스크립트 인라인 사용 전 -->
<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>
<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>
</body>
</html>
- 인라인 사용 전 결과
<script>
var username = userA;
var age =10;
//자바스크립트내추럴템플릿
var username2 =/*userA*/"test username";
//객체
var user = BasicController.User(username=userA, age=10);
</script>
- 인라인 사용 후 결과
자바스크립트인라인사용후
<script>
var username ="userA";
var age =10;
//자바스크립트내추럴템플릿
var username2 ="userA";
//객체
var user ={"username":"userA","age":10};
</script>
출처 : 인프런 - 우아한 형제들 기술이사 김영한의 스프링 완전 정복 (스프링 핵심원리 - 기본 편)
'Programming > Spring' 카테고리의 다른 글
| Spring - 검증 1 - Validation (0) | 2023.06.22 |
|---|---|
| Spring - 메시지, 국제화 (0) | 2023.06.22 |
| Spring - 스프링 MVC - 기본 기능 (0) | 2023.06.18 |
| Spring - 스프링 MVC - 구조 이해 (0) | 2023.06.18 |
| Spring - RequestBodyJsonController (0) | 2023.06.16 |