Thymeleaf 기본기능 정복하기[1편]

gwjeon·2021년 11월 1일

Spring Thymeleaf

공식 사이트

공식 메뉴얼 - 기본기능

공식 메뉴얼 - 스프링 통합

학습참조
인프런-스프링 MVC 2편 백엔드 웹 개발 활용 기술(김영한님)

이 글을 작성하고 난 뒤에는 내가 나중에 타임리프를 사용할 때에, 문법이 잘 기억이 나지 않을 때 이 글만 보아도 기본적인 타임리프 기능들을 사용할 수 있었으면 한다.

✅ 다루는 기능들

🚩 Thymeleaf(타임리프)란?

🚩 텍스트 출력하기 - text / [[...]] , utext / [(...)]

🚩 변수 - SpringEL

🚩 타임리프 기본 객체

🚩 유틸리티 객체

🚩 Url

🚩 리터럴(Literals)

✅ Thymeleaf(타임리프)란?

✔ 서버사이드 렌더링(Server Side Rendering, SSR)

클라이언트 사이드 렌더링(Client Side Rendering, CSR)이 아닌 서버에서 동적으로 HTML을 만들어 렌더링하는 할수있는 템플릿

✔ 네츄럴 템플릿(Natural templates)

순수 HTML을 유지하는 템플릿.
타임리프로 작성된 파일은 기본 HTML 구조를 유지하기 때문에 파일을 직접 열어도, 서버를 통해 렌더링 하더라도 일관된 HTML 구조를 유지한다.
JSP를 포함한 다른 템플릿들은 동적으로 렌더링 하기위하여 여러 기능들을 사용하는데 이 과정에서 HTML 구조가 뒤죽박죽 섞이기 때문에 정상적인 HTML 구조를 유지하기가 어렵다.
이렇게 순수 HTML을 그대로 유지하며 템플릿을 사용할 수 있는 타임리프의 특징을 네츄럴 팀플릿 이라한다.

✔ 스프링 통합 지원

스프링에서는 공식으로 타임리프를 사용할 것을 권장하며 스프링의 다양한 기능을 편리하게 사용할 수 있게끔 제공한다.

✔ Thymeleaf(타임리프) 사용선언

최상단 HTML 코드에 다음과 같이 선언한다.

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

✅ 텍스트 출력하기 - text / [[...]] , utext / [(...)]

⭐ controller

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

✔ th:text / [[...]]

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

출력

th:text 사용 : Hello Spring!
컨텐츠 안에서 직접 출력하기 : Hello Spring!

⭐ HTML 엔티티

스프링에서 Model에 담아 넘겨줄때부터 직접 <b></b> 코드를 작성하여 넘겨주어 보자.

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

이렇게 하면 개발자가 의도한 바로는 "Spring!"이 강조 처리된 "Hello Spring!"이 출력되어야 하겠지만 사실은 Hello <b>Spring!<b>가 출력된다. 웹브라우저는 '<' 를 HTML 태그의 시작으로 인식한다. 따라서 '<'를 HTML 태그가 아닌 단순히 문자로 표현할 수 있는 방법이 필요한데 이것을 HTML 엔티티라 한다. 그리고 이렇게 HTML에서 사용하는 특수문자를 HTML 엔티티로 변경하는 것을 이스케이프(escape)라 하는데 타임리프는 기본적으로 th:text, [[...]]을 통해 이스케이프(escape)를 제공한다.

HTML 엔티티는 다음과 같으며 이외에도 수많은 엔티티가 있다.

공백 :  
"<" : <
">" : >

그렇다면 이스케이프(escape)를 지원하지 않으려면 어떻게 해야할까? 이 역시 타임리프에서 th:utext, [(...)]를 통해 지원한다.

✔ th:utext / [(...)]

th:utext와 [(...)]을 통해 이스케이프 되지 않은 기능을 제공한다.

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

출력

th:text 사용 : Hello Spring!
컨텐츠 안에서 직접 출력하기 : Hello Spring!

이렇게 한다면 개발자가 의도한 대로 "Hello Spring!"이 출력되는 것을 확인할 수 있다.

✅ 변수 - SpringEL

타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다. 변수 표현식은 다음과 같다. "${...}"
그리고 이 변수 표현식에는 SpringEL이라는 스프링이 제공하는 표현식을 사용할 수 있다.

⭐ controller

@GetMapping("...")
public String ...(Model model) {

    User userA = new User("userA");
    
    List<User> list = new ArrayList<>();
    list.add(userA);
    
    Map<String, Object> map = new Map<>();
    map.put("userA", userA);
    
    model.addAttribute("userObject", user);
    model.addAttribute("userList", list);
    model.addAttribute("userMap", map);
    
    return "...";
}

class User {
    private String name;
    
    public User(String name) {
    	this.name = name;
    }
}

✔ SpringEL 표현식

⭐ Object

<ul>
    <li>${userObject.name} = <span th:utext="${userObject.name}"></span></li>
 	<li>${userObject.['name']} = <span th:utext=">${userObject.['name']}"></span></li>
 	<li>${userObject.getName()} = <span th:utext="${userObject.getName()}"></span></li>
</ul>

출력

${userObject.name} = userA
${userObject.['name']} = userA
${userObject.getName()} = userA

⭐ List

<ul>
    <li>${userList[0].name} = <span th:utext="${userList[0].name}"></span></li>
 	<li>${userList[0].['name']} = <span th:utext=">${userList[0].['name']}"></span></li>
 	<li>${userList[0].getName()} = <span th:utext="${userList[0].getName()}"></span></li>
</ul>

출력

${userList[0].name} = userA
${userList[0].['name']} = userA
${userList[0].getName()} = userA

⭐ Map

<ul>
    <li>${userMap['userA'].name} = <span th:utext="${userMap['userA'].name}"></span></li>
 	<li>${userMap['userA'].['name']} = <span th:utext=">${userMap['userA'].['name']}"></span></li>
 	<li>${userMap['userA'].getName()} = <span th:utext="${userMap['userA'].getName()}"></span></li>
</ul>

출력

${userMap['userA'].name} = userA
${userMap['userA'].['name']} = userA
${userMap['userA'].getName()} = userA

✔ 지역변수

타임리프 내에서도 지역변수를 선언하여 사용할 수 있으며 선언한 태그안에서만 사용가능 하다.

<div th:with="person=${users[0]}"> <!-- (1) -->
 <p>사람의 이름은 <span th:text="${person.name}"></span></p> <!-- (2) -->
</div>

(1): th:with를 이용하여 변수명이 person이고 users[0]을 값으로 가지는 지역변수 선언.
(2): person이 users[0]을 가지고 있으므로 변수표현식 ${person.name}을 통하여 출력.
해당 person 변수는 div 내에서만 사용가능.

출력

사람의 이름은 userA

✅ 타임리프 기본 객체

타임리프는 다음과 같은 기본 객체들을 제공한다.

✔ 기본객체

${#request}
${#response}
${#session}
${#servletContext}
${#locale}

#request는 HttpServletRequest 객체에 접근하듯 reqeust.geParameter("...")와 같이 접근해야 하지만 이러한 점을 해결하기 위한 편의 객체를 제공한다.

✔ 편의객체

⭐ params

<p th:text="${params.username}">username</p>

http 호출시 http://....?username=gwjeon로 접속되었다면 username이 parameter에 존재하기 때문에 출력 결과는 gwjeon 이 된다.

⭐ session

Controller

@GetMapping("...")
public String ...(HttpSession session) {
     session.setAttribute("sessionData", "Hello Spring");
     return "...";
}

<p th:text="${session.sessionData}">sessionData</p>

세션 접근도 지원한다. 컨트롤러에서 세션에 sessionData를 key로 한 Hello Spring 문자열을 저장하였다. 출력 결과는 Hello Spring이 된다.

⭐ 스프링 빈 접근

스프링 빈에 접근하는것도 지원한다.

@Component("helloBean")
class HelloBean {
    public String hello(String data) {
        return "Hello " + data;
    }
}

다음과 같은 스프링 빈이 있다고 가정 했을때

<p th:text="${@helloBean.hello('Hello Srping')}">springBean</p>

와 같이 한다면 출력 결과는 Hello Spring이 된다. @helloBean은 빈이름이 되며 첫글자는 소문자로 변경되어 표기하고 .hello를 통해 빈에 등록된 메서드에 Hello Spring 문자열을 argument로 전달한다.

✅ 유틸리티 객체

타임리프에서 지원하는 유틸리 객체는 다음과 같다.

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

워낙 종류가 많으니 어떠한 것이 있는지만 기억하고 사용하기 전 매뉴얼을 참고하자.

✔ JAVA8 날짜 객체

타임리프에서 JAVA8 날짜인 LocalDate , LocalDateTime , Instant 를 사용하려면 추가 라이브러리 thymeleaf-extras-java8time가 필요하며 스프링 부트 타임리프를 사용하면 해당 라이브러리가 자동으로 추가된다. JAVA8 날짜 유틸리티 객체는 #temporals 이다.

✅ Url

타임리프에서는 기본적으로 Url은 모두 @{}안에 정의 되어야 한다.

⭐ controller

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

✔ 여러가지 url 타입

<ul>
    <li><a th:href="@{/hello}">basic url</a></li> <!-- (1) -->
    <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li> <!-- (2) -->
    <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li> <!-- (3) -->
    <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li> <!-- (4) -->
</ul>

기본적으로 url 구조를 먼저 작성하고 뒤에 ()괄호안에 동적으로 들어갈 value를 할당하는 구조이다.

(1): 기본 url 타입으로 /hello로 이동한다.
(2): parameter 타입으로 /hello?param1=data1&param=data2로 이동한다.
(3): path variable 타입으로 /hello/{...}/{...}로 이동한다.
(4): parameter와 path variable을 같이 사용 하는것으로 /hello/{...}?param2=data2로 이동한다. 이 경우는 url상에 variable인 param1까지만 할당되고 param2는 해당되는것이 없음으로 자동으로 parameter로 할당된다.

✅ 리터럴(Literals)

타임리프에는 다음과 같은 리터럴이 있다.

문자
숫자
boolean
null

✔ 문자 리터럴

타임리프 문자 리터럴은 항상 '...' 작은 따옴표로 감싸야 한다.

⭐ 공백 없이 쭉 이어지는 문자인 경우

<span th:text="hello"></span>

위 처럼 공백 없이 쭉 이어지는 문자라면 작은 따옴표를 생략할 수 있다.

⭐ 공백이 있는 문자인 경우

<span th:text="hello spring!"></span> <!-- (1) -->
<span th:text="'hello spring!'"></span> <!-- (2) -->

(1): 공백이 있는 문자의 경우는 에러가 발생한다.
(2): 공백이 있을 경우 작은 따옴표로 감싸야 한다.

✔ 리터럴 대체(Literal substitutions)

하지만 매번 이렇게 리터럴을 작은 따옴표를 통하여 작성하는 것은 비효율적이다.
리터럴 대체문법을 사용하면 매우 간편하게 해결할 수 있다.

<span th:text="|hello spring!|"></span>

위 처럼 문자를 |...|으로 감싸주면 작은 따옴표로 감싸지 않아도 된다. 여기서 의문이 든다.
"'hello spring!'"이나 "|hello spring!|"이나 똑같이 문자를 감싸야 하는건 동일한데 도대체 무엇이 다른것인가?

리터럴 대체문법은 마치 JavaScript의 리터럴 템플릿 문법과 같다.

예를들어 다음과 같은 controller가 있다고 가정하자.

⭐ controller

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

⭐ 리터럴 대체 문법을 써야하는 이유

<span th:text="'hello ' + ${data}"></span> <!-- (1) -->
<span th:text="|hello ${data}|"></span> <!-- (2) -->

똑같은 hello Spring! 이라는 문자를 출력하는 내용이지만 2가지 방법으로 갈린다.

(1): 모델로부터 전달받은 data를 출력하기 위해선 + 연산자를 통해야 하며 공백을 위하여 hello 문자 뒤에 공백을 추가했다.
(2): 리터럴 대체 문법을 통하여 |...| 로 감싸기만 했을 뿐인데 마치 문자를 사용하듯 편리하다. |...|안에 있는 공백을 포함한 문자들을 출력하고 ${data} 변수부분은 Spring!로 치환된다.

gwjeon

ansuzh

이전 포스트

request queryParamater를 읽는 여러가지 방법

다음 포스트

Thymeleaf 기본기능 정복하기[1편]

✅ 다루는 기능들

🚩 Thymeleaf(타임리프)란?

🚩 텍스트 출력하기 - text / [[...]] , utext / [(...)]

🚩 변수 - SpringEL

🚩 타임리프 기본 객체

🚩 유틸리티 객체

🚩 Url

🚩 리터럴(Literals)

✅ Thymeleaf(타임리프)란?

✔ 서버사이드 렌더링(Server Side Rendering, SSR)

✔ 네츄럴 템플릿(Natural templates)

✔ 스프링 통합 지원

✔ Thymeleaf(타임리프) 사용선언

✅ 텍스트 출력하기 - text / [[...]] , utext / [(...)]

⭐ controller

✔ th:text / [[...]]

출력

⭐ HTML 엔티티

HTML 엔티티는 다음과 같으며 이외에도 수많은 엔티티가 있다.

✔ th:utext / [(...)]

출력

✅ 변수 - SpringEL

⭐ controller

✔ SpringEL 표현식

⭐ Object

출력

⭐ List

출력

⭐ Map

출력

✔ 지역변수

출력

✅ 타임리프 기본 객체

✔ 기본객체

✔ 편의객체

⭐ params

⭐ session

Controller

⭐ 스프링 빈 접근

✅ 유틸리티 객체

✔ JAVA8 날짜 객체

✅ Url

⭐ controller

✔ 여러가지 url 타입

✅ 리터럴(Literals)

✔ 문자 리터럴

⭐ 공백 없이 쭉 이어지는 문자인 경우

⭐ 공백이 있는 문자인 경우

✔ 리터럴 대체(Literal substitutions)

⭐ controller

⭐ 리터럴 대체 문법을 써야하는 이유

request queryParamater를 읽는 여러가지 방법

Thymeleaf 기본기능 정복하기[1편]

0개의 댓글