[MVC 2편] 타임리프

블랑·2023년 3월 20일

Thymeleaf

스프링 인프런

목록 보기

4/4

사전 작업 :

빌드 설치 후,
resource - static - index.html의 기본 홈 hmtl 생성

Thymeleaf

타임리프의 특징은 다음과 같다.

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

서버 사이드 HTML 렌더링

백엔드 서버에서 HTML을 동적으로 렌더링한다.

네츄럴 템플릿

타임리프는 순수 HTML을 최대한 유지하는 특징이 있다.
이렇게 순수하게 HTML을 유지하며 뷰 템플릿도 사용할 수 있는 특징을 네츄럴 템플릿이라 한다.

따라서 웹 브라우저에서 파일을 열어도 내용을 확인할 수 있고, 서버를 통해 뷰 템플릿을 거치면 변경된 결과를 확인할 수 있다.
다른 뷰 템플릿과 달리 해당 타임리프 파일을 그대로 웹에서 열어도 HTML 결과를 확인할 수 있다. (다만 동적으로 결과가 렌더링되지는 않는다.)

스프링 통합 지원

타임리프는 스프링의 다양한 기능을 편리하게 사용할 수 있게 지원한다.

타임리프 사용 선언식

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

텍스트 출력 (text, utext)

타임리프는 기본적으로 HTML 태그 속성에 기능을 정의하여 동작한다. 콘텐츠에 데이터를 출력할 때는 다음과 같이 사용한다.
<span th:text="${data}">

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

다음은 th:text 사용과 직접 출력을 사용한 예제이다. 여기서 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";
    }
}

Escape, UnEscape

'<', '>' 등의 HTML에서 사용되는 특수 기호를 사용할 때는 주의하여야 한다.

HTML과 같이, &lt, &gt 등을 HTML 엔티티라고 한다. 이는 태그의 시작이 아니라 문자로 표현할 수 있는 단어를 대체한 것이다.
이런 개념이 없다면 태그 문자와 실제 문자를 구분할 수 없기 때문이다.

하지만 이러한 이스케이프를 사용하지 않으려면?

UnEscape

타임리프는 다음 두 기능을 제공한다. 우측과 같이 치면 된다.
th:text -> th:utext
[[...]] -> [(...)]

변수 - SpringEL

타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다. 이는 JavaScript와 유사하다.

Object
${user.username} = userA
${user['username']} = userA
$user.getUsername() = userA

List
users[0].username -> 프로퍼티 접근
users[0]['username'] 동일
users[0].getUsername() 메서드 직접 호출

Map
userMap['userA'].username : Map에서 userA를 찾고 프로퍼티 접근
map.get("userA").getUsername()
userMap['userA']['username']
userMap['userA'].getUsername()
위의 예제들과 동일

지역 변수 선언

타임리프 안에서도 지역변수를 선언할 수 있다. th:with을 사용하면 된다.

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

기본 객체들

타임리프는 몇 가지 기본 객체들을 제공한다. 다음 예제를 통해 사용법을 알아보자.

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