Thymeleaf 기능

타임리프 소개

타임리프 특징

SSR - 서버 사이드에서 HTML을 렌더링 합니다
네츄럴 템플릿
스프링 통합 지원

타임리프 기본 기능

선언 : 타임리프를 사용하려면 다음 선언을 하면 됩니다.

<html xmlns:th="http://www.thymeleaf.org">

기본 표현식

타임리프는 다음과 같은 기본 표현식들을 제공한다. 지금부터 하나씩 알아보겠습니다.

- 간단한 표현

1. 변수 표현식 : ${...}

2. 선택 변수 표현식 : *{...}

3. 메시지 표현식 : #{...} / 3. 기본 객체들에서 사용

4. 링크 URL 표현식 : @{...} / 5. URL 링크 기능에서 사용

5. 조각 표현식 : ~{...} / 14. 템플릿 조각 기능에서 사용

- 리터럴

1. 텍스트 : 'one text', 'Another one!'

2. 숫자 : 0, 34, 3.0, 12.3 ..

3. 부울 : true, false

4. 널 : null

5. 리터럴 토큰 : one, sometext, main ...

- 문자 연산

1. 합치기 : +

2. 리터럴 대체 : |The name is ${name}|

- 산술 연산

1. Binary operators : +, -, *, /, %

2. Minus sign (단항 연산): - ex) -1, -2

- 불린 연산

1. Binary operators : and, or

2. Boolean negation (단항 연산) : !, not

- 비교와 동등

1. 비교 : > (gt) , < (lt) , >=(ge) , <= (le) (gt,lt,ge,le)

2. 동등 연산 : ==(eq), !=(ne)

- 조건 연산

1. If-then : (if) ? (then)

2. If-then-else : (if) ? (then) : (else)

3. Default : (value) ?: (defaultvalue)

- 특별한 토큰

No operation : _ (띄우고 밑줄)

이제 기본 기능을 하나씩 알아보겠습니다.

1. 텍스트 - text, utext

타임리프는 기본적으로 HTML 테그의 속성에 기능을 정의해서 동작합니다. HTML의 콘텐츠에 데이터를 출력할 때는 다음과 같이

th:text를 사용하면 됩니다.

ex) HTML 사이드에서 렌더링할 텍스트

만약 HTML 테그의 속성이 아닌 HTML 컨텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]]을 사용하면 됩니다.

ex) [[${data}]]

@Controller
@RequestMapping("/basic")
public class BasicController {

    @GetMapping("/text-basic")
    public String textBasic(Model model) {
        model.addAttribute("data", "Hello Spring!");
        return "basic/text-basic";
    }

View template : basic/text-basic

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>컨텐츠에 데이터 출력하기</h1>
<ul>
    <li><span th:text="${data}">CSR 텍스트</span></li>
    <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>
</body>
</html>

CSR(클라이언트 사이드 렌더링, 절대 경로로 HTML 호출)에서는 th가 붙은 속성을 읽지 못하기 때문에 무시합니다.

SSR에서는 th가 붙은 속성을 읽습니다.

Escape

HTML 문서는 <, >같은 특수 문자를 기반으로 정의됩니다.

따라서 뷰 템플릿으로 HTML화면을 생성할 때는 출력하는 데이터에 이러한 특수문자가 있는 것을 주의해서 사용해야 합니다.

앞에서 만든 예제의 데이터인 "Hello Spring!"을 "Hello Spring"로 바꿔서 실행해보면

"Hello Spring!"을 "Hello <b>Spring</b>"로 바꿔서 실행한 결과

테그가 로 변경된 것을 확인할 수 있습니다.

웹 브라우저는 <를 HTML 태그의 시작으로 인식하기 때문에 <를 테그의 시작이 아니라 문자로 표현할 수 있는 방법이 필요합니다.

이것(&lt, &gt)을 HTML 엔티티 라고합니다.

HTML에서 사용하는 특수문자(<,>)를 HTML엔티티로 변경하는 것을 이스케이프(escape)라고 합니다.

그리고 타임리프가 제공하는 th:text, [[...]]는 기본적으로 이스케이프를 제공합니다.

< ▶︎ <

< ▶︎ >

이스케이프의 기능을 사용하지 않으려면 text 대신 utext를 사용하거나 [[...]] 대신 [(...)]을 사용하면 됩니다.

@GetMapping("/text-unescaped")
public String textUnescaped(Model model) {
    model.addAttribute("data", "Hello <b>Spring!</b>");
    return "basic/text-unescaped";
}

View template : basic/text-unescpaed

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Unescaped Text</title>
</head>
<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>
  <li><span th:inline="none">[(...)] = </span>[(${data})]</li>
</ul>
</body>
</html>

th:inline = "none" : 타임리프는 [[...]]을 해석하기 때문에, 화면 [[...]]을 글자를 보여줄 수 없습니다. 이 때 inline = "none" 옵션은 이 태그안에서 타임리프가 해석하지 않도록 해주는 옵션입니다.

❗️실제 서비스를 개발하다 보면 escape를 사용하지 않아서 HTML이 정상 렌더링 되지 않는 수많은 문제가 발생합니다.

escape를 기본으로 하고 , 꼭 필요할 때만 unescape를 사용하도록 합시다.

2. 변수 - SpringEL

변수 표현식 ${...} 에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있습니다.

@Data
static class User {
    private String username;
    private int age;

    public User(String username, int age) {
        this.username = username;
        this.age = age;
    }
}

@GetMapping("/variable")
public String variable(Model model) {
    User userA = new User("DongwoongKim", 25);

    List<User> list = new ArrayList<>();
    list.add(userA);

    Map<String, User> map = new HashMap<>();
    map.put("userA", userA);

    model.addAttribute("user", userA);
    model.addAttribute("users", list);
    model.addAttribute("userMap", map);

    return "basic/variable";
}

View template - basic/variable

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<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>

<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
  <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p> </div>

<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>

</body>
</html>

th:with를 사용하면 지역 변수를 선언해서 사용할 수 있습니다. (선언 태그 내에서만 사용 가능)
ex) <div th:with="first=${user[0]}">
처음 사람의 이름은 
</div>

first는 div 태그 안에서만 사용 가능.

SpringEL 다양한 표현식 사용

1. Object

user.username : user의 username을 프로퍼티로 접근 (user.getUsername())
user['username'] : 마찬가지로 프로퍼티로 접근
user.getUsername() : user의 getUsername()을 직접 호출

2. List

users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근
users[0]['username'] : 위와 같음
users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출

3. Map

userMap['userA'].username : 맵에서 userA를 찾고 username 프로퍼티 접근
userMap['userA']['username'] : 위와 같음
userMap['userA'].getUsername() : 맵에서 userA를 찾고 메소드 직접호출

3. 기본 객체들

타임리프가 제공하는 객체들이 있습니다.

1. ${#request}

2. ${#response}

3. ${#session}

4. ${#servletContext}

5. ${#locale}

(1,2,3,4는 스프링 3.0부터는 제공하지 않음)

그런데 #request는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data")처럼 불편하게 접근해야 하는데 이런점을 해결하기 위한 편의 객체도 제공합니다.

HTTP 요청 파라미터 접근 : param.파라미터이름

ex) "${param.paramData}"

HTTP 세션 접근 : session.세션이름

ex) "${session.sessionData}"

스프링 빈 접근 : @

ex) "${@hellobean.hello('Spring!')}"

@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;
    }
}

<!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>

4. 유틸리티 객체와 날짜

타임리프는 문자, 숫자, 날짜, URI 등을 편리하게 다루는 다양한 유틸리티 객체들을 제공합니다.

타임리프 유틸리티 객체들

#message : 메시지, 국제화 처리
#uris : URI 이스케이프 지원
#dates : java.util.Date 서식 지원
#calendars : java.util.Calendar 서식 지원
#temporals : 자바8 날짜 서식 지원
#numbers : 숫자 서식 지원
#strings : 문자 관련 편의 기능
#objects : 객체 관련 기능 제공
#bools : boolean 관련 기능 제공
#arrays : 배열 관련 기능 제공
#lists , #sets , #maps : 컬렉션 관련 기능 제공
#ids : 아이디 처리 관련 기능 제공, 뒤에서 설명

대략 이런것들이 있다 정도만 알고 자세히 하나하나 다 알 필요는 없습니다.

그냥 필요한 상황이 있다면 찾아서 사용합시다.

사용 예시로 #temporals를 사용해보고 넘어가도록 하겠습니다.

@GetMapping("/date")
public String date(Model model) {
    model.addAttribute("localDateTime", LocalDateTime.now());
    return "basic/date";
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>LocalDateTime</h1>
<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>
<h1>LocalDateTime - Utils</h1>
<ul>
    <li>${#temporals.day(localDateTime)} = <span th:text="${#temporals.day(localDateTime)}"></span></li>
    <li>${#temporals.month(localDateTime)} = <span th:text="${#temporals.month(localDateTime)}"></span></li>
    <li>${#temporals.monthName(localDateTime)} = <span th:text="${#temporals.monthName(localDateTime)}"></span></li>
    <li>${#temporals.monthNameShort(localDateTime)} = <span th:text="${#temporals.monthNameShort(localDateTime)}"></span></li>
    <li>${#temporals.year(localDateTime)} = <span th:text="${#temporals.year(localDateTime)}"></span></li>
    <li>${#temporals.dayOfWeek(localDateTime)} = <span th:text="${#temporals.dayOfWeek(localDateTime)}"></span></li>
    <li>${#temporals.dayOfWeekName(localDateTime)} = <span th:text="${#temporals.dayOfWeekName(localDateTime)}"></span></li>
    <li>${#temporals.dayOfWeekNameShort(localDateTime)} = <span th:text="${#temporals.dayOfWeekNameShort(localDateTime)}"></span></li>
    <li>${#temporals.hour(localDateTime)} = <span th:text="${#temporals.hour(localDateTime)}"></span></li>
    <li>${#temporals.minute(localDateTime)} = <span th:text="${#temporals.minute(localDateTime)}"></span></li>
    <li>${#temporals.second(localDateTime)} = <span th:text="${#temporals.second(localDateTime)}"></span></li>
    <li>${#temporals.nanosecond(localDateTime)} = <span th:text="${#temporals.nanosecond(localDateTime)}"></span></li>
</ul>
</body>
</html>

5. URL 링크

타임리프에서 URL 링크를 생성할 때는 @{...} 문법을 사용하면 됩니다.

@GetMapping("/link")
public String link(Model model)
{
    model.addAttribute("param1","data1");
    model.addAttribute("param2","data2");
    return "basic/link";
}

뷰템플릿

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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}(param1=${param1})}">path variable</a></li>
    <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
</ul>
</body>
</html>

단순 URL : /hello ▶︎ @{/hello}
쿼리 파라미터 : /hello?param1=data1&param2=data2 ▶︎ @{/hello/(param1= ${param1}, param2 = ${param2}) }
경로 변수 : /hello/data1/data2 ▶︎ @{/hello/{param1}/{param2} ( param1 = ${param1}, param2 = ${param2}) }

6. 리터럴

리터럴은 소스 코드 상에 고정된 값을 말하는 용어입니다.

ex) String a = "hello", int a = 10에서 "hello", 10은 리터럴

타임리프에는 문자, 숫자, 불린, null 총 네가지 리터럴이 있습니다.
타임리프에서는 문자 리터럴은 항상 '로 감싸야 합니다.
- ex)
그런데 문자를 '로 감싸는 일은 매우 귀찮은데, 공백 없이 쭉 이어진다면 '로 안 감싸주어도 됩니다.
더 편한 방법은 리터럴 대체 문법인 |을 사용해서 |...|로 감싸주는 방법

@GetMapping("/literal")
public String literal(Model model)
{
    model.addAttribute("data","Spring!");
    return "basic/literal";
}

뷰템플릿

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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> TEST </li> 
    <li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>
</ul>
</body>
</html>

주석 코드 : 오류 발생 / "hello world"에서 중간의 공백 때문에 하나의 토큰으로 인지 x

큰 따옴표 내부에 작은 따옴표로 감싸 주거나, + 를 이용해 문자열을 합치거나, 리터럴 대체 문법 || 을 사용해 감싸주는 방법이 있습니다.

7. 연산

타임리프 연산은 자바와 크게 다르지 않습니다. HTML 안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의합시다.

@GetMapping("/operation")
public String operate(Model model)
{
    model.addAttribute("nullData",null);
    model.addAttribute("data","Spring!");
    return "basic/operation";
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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 &gt; 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>
</html>

비교연산에서 HTML 엔티티 (<,>, >=, <=, !, ==, != )를 사용하는 부분만 주의합시다.
조건식 : 자바와 동일
Elvis 연산자 : 조건식의 편의 버전
- 엘비스 연산자는 ?:로 표현하며, ?:의 왼쪽 객체가 non-null이면 그 객체의 값이 리턴되고, null이라면 ?:의 오른쪽 값을 리턴합니다. )
No operation : _인 경우에는 마치 타임리프가 실행되지 않는 것처럼 동작하는 데 이것을 잘 활용하면 HTML의 내용 그대로 렌더링 할 수 있다.

8. 속성 값 설정

타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작합니다.

@GetMapping("/attribute")
public String attribute()
{
    return "basic/attribute";
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
</html>

속성 설정

th:* 로 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 적용합니다. 만약 기존 속성이 없으면 새로 만듭니다.

ex) 에서 타임리프로 동작하면 th:name이 렌더링 됩니다.

속성 추가

th:attrappend : 속성 값의 뒤에 값을 추가 (앞에 빈칸)
th:attrprepend : 속성 값의 앞에 값을 추가 (뒤에 빈칸)
th:classappend : class 속성에 자연스럽게 추가 (빈칸을 신경쓰지 않아도 됩니다)

Checked 처리

자주 사용되는 input 태그의 checkbox 속성에는 chekced 속성 이름만 있으면 모조리 체크되는 사양적 문제가 있습니다.

타임리프에서는 th:checked라는 속성을 제공하는데 여기엔 true, false값을 지정해서 default 체크 값을 설정할 수 있습니다.

9. 반복 - each

타임리프에서는 th:each를 사용해서 반복을 할 수 있습니다.

추가로 반복에서 사용할 수 있는 여러 상태 값을 지원합니다.

@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);
}

뷰 템플릿

<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 : ${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>

th:each가 포함된 태그를 포함해서 iterator 합니다.

<tr th:each = "user, userStat : ${users}">
두번째 파라미터 userStat 는 생략 가능, 생략하면 지정한 변수명(user) + Stat이 됩니다.
두번째 파라미터를 통해 반복 상태를 확인할 수 있는 기능을 사용할 수 있습니다.
- 기능 : index, count, size, even/odd, first/last, current

10. 조건부 평가

타임리프의 조건식

if, unless

   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);
    }

    @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 (th:if, th:unless

에서 if조건이 만족하지 않는다면 태그 자체를 렌더링 하지 않습니다.
에서 unless(if not) 조건이 만족하지 않는다면 태그 자체를 렌더링 하지 않습니다.

switch (th:switch=${변수명}

자바 switch-case문과 동일
*은 만족하는 조건이 없을 때 사용하는 디폴트

11. 주석

@GetMapping("/comments")
public String comments(Model model)
{
    model.addAttribute("data","Spring!");
    return "basic/comments";
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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 주석으로 CSR에서도 렌더링하지 않습니다.
타임리프 파서 주석 
일반적인 타임리프 처리 주석 (렌더링 하지 않습니다)
타임리프 프로토타입 주석 
HTML 파일을 웹브라우저에서 그대로 열어보면 HTML 주석이기 때문에 이 부분이 웹 브라우저가 렌더링 하지 않지만, 타임리프 렌더링을 한 경우에는 보이는 기능입니다.

12. 블록

<th:block> 은 HTML 태그가 아닌 유일한 타임리프의 자체 태그입니다.

@GetMapping("/block")
public String block(Model model)
{
    addUsers(model);
    return "basic/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>

위와 같이 (사용자이름, 나이)가 하나의 div 태그에 (요약)이 하나의 div태그에 담겨있습니다.

th:block은 말 그대로 하나의 블록처리를 하여 반복문을 돌리게 해줌으로써 (사용자 이름, 나이, 요약) 이 한 블록안에 나오게 됩니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<span th:each="user : ${users}">
  <div>
    사용자 이름1 <span th:text="${user.username}"></span>
    사용자 나이1 <span th:text="${user.age}"></span>
  </div>
</span>

<span th:each="user : ${users}">
  <div>
    요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
  </div>
</span>
</body>
</html>

이렇게 나눠진 반복문을 th:block을 사용하면 원큐에 돌릴 수 있습니다.

13. 자바 스크립트 인라인

타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있는 자바스크립트 인라인 기능을 제공합니다.

@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>

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
    [# th:each="user : ${users}"]
    var user[[${userStat.count}]] = [[${user}]];
    [/]
</script>
</body>
</html>

텍스트 렌더링

var username = [[${user.username}]];
인라인 사용 전 : var username = userA;
인라인 사용 후 : var username = "userA";

결과적으로 인라인을 사용하지 않으면 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생.

age의 경우는 숫자기 때문에 정상 렌더링이 됩니다.

인라인을 사용하면 렌더링 결과에 문자 타입인 경우 "를 포함해줍니다. 추가로 자바스크립트에서 문제가 될 수 있는 문자가 포함되어있으면 이스케이프 처리도 해줍니다. ex) " -> \"

자바스크립트 내츄럴 템플릿

타임리프는 HTML 파일을 직접 열어도 동작하는 내츄럴 템플릿 기능을 제공합니다.

자바스크립트 인라인 기능을 사용하면 주석을 활용해 이 기능을 사용할 수 있습니다.

인라인 사용 전 : var username2 = /*userA*/ "test username";
인라인 사용 후 : var username2 = "userA";

객체

객체를 JSON으로 자동으로 변환해줍니다.

var user = [[${user}]];
인라인 사용 전 : var user = BasicController.User(username=userA, age=10);
인라인 사용 후 : var user = {"username":"userA", "age":10};

인라인에서도 each를 지원합니다.

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
    [# th:each="user : ${users}"]
    var user[[${userStat.count}]] = [[${user}]];
    [/]
</script>
</body>

결과

  <script>
  var user1 = {"username":"userA","age":10};
  var user2 = {"username":"userB","age":20};
  var user3 = {"username":"userC","age":30};
  </script>

[# th:each="user : ${users}"] ~~ [/]

저작자표시

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

Thymeleaf - 스프링 통합 기능 (0)	2023.03.19
Thymeleaf 기능 - 템플릿 조각, 템플릿 레이아웃 (0)	2023.03.17
Spring MVC - 웹 페이지 만들기 with Thymeleaf (0)	2023.03.15

블로그의 정보

Study Repository

rlaehddnd0422

Thymeleaf 기능 - 기본

타임리프 소개

타임리프 특징

타임리프 기본 기능

1. 텍스트 - text, utext

Escape

2. 변수 - SpringEL

SpringEL 다양한 표현식 사용

3. 기본 객체들

4. 유틸리티 객체와 날짜

5. URL 링크

6. 리터럴

7. 연산

8. 속성 값 설정

속성 설정

속성 추가

Checked 처리

9. 반복 - each

10. 조건부 평가

11. 주석

12. 블록

13. 자바 스크립트 인라인

텍스트 렌더링

자바스크립트 내츄럴 템플릿

객체

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

타임리프 소개

타임리프 특징

타임리프 기본 기능

1. 텍스트 - text, utext

Escape

2. 변수 - SpringEL

SpringEL 다양한 표현식 사용

3. 기본 객체들

4. 유틸리티 객체와 날짜

5. URL 링크

6. 리터럴

7. 연산

8. 속성 값 설정

속성 설정

속성 추가

Checked 처리

9. 반복 - each

10. 조건부 평가

11. 주석

12. 블록

13. 자바 스크립트 인라인

텍스트 렌더링

자바스크립트 내츄럴 템플릿

객체

'📕 Backend > Thymeleaf Template' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바