Thymeleaf[텍스트 - text, utext]

조영재·2023년 6월 10일

Thymeleaf

목록 보기

1/15

프로젝트 생성

타임리프 소개

타임리프 특징

서버 사이드 HTML 렌더링 (SSR)
- 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용된다
네츄럴 템플릿
- 타임리프는 순수 HTML을 최대한 유지하는 특징이 있다.
  - 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징
- 타임리프로 작성한 파일은 HTML을 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 내용을 확인할 수 있다.
- 서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과를 확인할 수 있다.
스프링 통합 지원
- 타임리프는 스프링과 자연스럽게 통합되어 스프링의 다양한 기능을 쉽게 사용할 수 있다.

타임리프 기본 기능

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

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org/)">

기본 표현식

간단한 표현
- 변수 표현식: ${...}
- 선택 변수 표현식: *{...}
- 메시지 표현식: #{...}
- 링크 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 태그의 속성에 기능을 정의해서 동작한다.

`th:text`

HTML의 콘텐츠(content)에 데이터를 출력할 때 사용

<span th:text="${data}"></span>

`[[...]]`

HTML 테그의 속성이 아니라 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶을때 사용

<span>hello [[${data}]]</span>

BasicController

package hello.thymeleaf.basic;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

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

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

/resources/templates/basic/text-basic.html

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

실행결과

Escape

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

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

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

타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.

HTML 엔티티

HTML의 예약어(<, >)가 아닌 문자로 표현해 표기의 혼란을 막기 위해서 사용하는 것

< → <

> → >

공백 → $nbsp;

Unescape

이스케이프 기능을 사용하지 않는 방법

th:utext
**[(...)]**

basicController

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

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

}

/resources/templates/basic/text-unescaped.html

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