2 분 소요


공식 메뉴얼

타임리프 특징

  • 서버 사이드 HTML 렌더링(SSR)
  • 네츄럴 템플릿(natural templates)
  • 스프링 통합 지원

SSR

타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용된다.

Natural Templates

JSP를 포함한 다른 뷰 템플릿들과 달리 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 타임리프의 특징.

스프링 통합 지원

타임리프는 스프링과 자연스럽게 통합되고, 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.


기본 기능

타임리프 사용 선언
<html xmlns:th="http://www.thymeleaf.org">

텍스트 - text, utext

텍스트를 출력하는 기능으로, HTML 콘텐츠(content)에 데이터를 출력할 때 HTML 테그의 속성에 th:text를 사용한다.

HTML 테그의 속성이 아닌 HTML 콘텐츠 영역안에서 직접 데이터를 출력하려면 [[...]]을 사용한다.
[[${data}]]

BasicController

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

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

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

<ul>
    <li>th:text 사용 <span th:text="${data}"></span></li>
    <li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>
</ul>


Escape

HTML 문서는 <,>같은 특수 문자를 기반으로 정의되기 때문에 출력하는 데이터에 이러한 특수 문자가 있는 것을 주의해서 사용해야 한다.

예시
hello <b>Spring!</b> 입력

웹 브라우저 : Hello <b>Spring!</b>
소스 : Hello &lt;b&gt;Spring!&lt;/b&gt;

<b>가 있으면 해당 부분을 강조하는 것이 목적이었지만, <b>테그가 그대로 나온다.

HTML 엔티티

웹 브라우저는 <를 HTML 테그의 시작으로 인식하기 때문에 테그의 시작이 아닌 문자로 표현할 수 있는 방법이 필요한데, 이것을 HTML 엔티티라 한다. 그리고 이렇게 HTML에서 사용하는 특수 문자를 HTML 엔티티로 변경하는 것을 escape라 한다.
타임리프가 제공하는 th:text, [[...]]는 기본적으로 escape를 제공한다.

  • < -> &lt;
  • > -> &gt;

Unescape

escape 기능을 사용하지 않으려면 다음 기능을 사용하면 된다.

  • th:text -> th:utext
  • [[...]] -> [(...)]

입력 : model.addAttribute(“data”, “Hello Spring!”);
/resources/templates/basic/text-unescape.html

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

<ul>
    <li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
    <li><span th:inline="none">[(...)] = </span>[(${data})]</li>
</ul>
  • th:inline="none" : 타임리프는 [[...]]를 해석하여 화면에 [[...]]글자를 보여줄 수 없기 때문에, 이 테그 안에서는 타임리프가 해석하지 말라는 옵션이다.

주의
실제 서비스 개발을 하다보면 escape를 사용하지 않아서 HTML이 정상적으로 렌더링 되지 않는 문제가 발생하기 때문에 escape를 기본으로 하고, 필요한 때만 unescape를 사용.

변수 - SpringEL

타임리프에서 변수를 사용할 때 사용하는 변수 표현식
${...}

BasicController

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

/resources/templates/basic/variable.html

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

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

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

Object

  • user.username: user의 username을 프로퍼티 접근 -> user.getUsername()
  • user['username'] -> user.getUsername()
  • user.getUsername(): user의 getUsername()을 직접 호출

List

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

Map(생략)

지역 변수 선언

th:with을 사용하면 지역 변수를 선언해서 사용할 수 있다.

<div th:with="first=${users[0]}">
    <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>


<출처 : 인프런 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술(김영한)>

댓글남기기

참고