[Thymeleaf] 기본 문법 (text, 변수표현, URL 링크, 리터럴)

텍스트 - text, utext

1. 내용 변경 : th:text , [[…]]

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

1) th:text

• 내용의 값을 th:text 의 값으로 변경한다.
• 여기서는 ‘텍스트’을 ${data} 의 값으로 변경한다.

2) [[…]]

• [[…]] 안에 있는 데이터를 직접 출력할 수 있다.

---

2. Escape

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

HTML 엔티티 : 웹 브라우저는 ‘<’ 를 HTML 테그의 시작으로 인식한다. 따라서 < 를 테그의 시작이 아니라 문자로 표현할 수있는 방법을 HTML 엔티티라 한다.

• 타임리프가 제공하는 th:text , [[...]] 는 기본적으로 이스케이스(escape)를 제공한다.
  • (ex) ‘<’ → &lt ‘>’ → &gt 등

---

3. Unescaped - th:utext

• th:text → th:utext
• [[…]] → [(…)]

data = "Hello < b >spring!< b >" 일때

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

<li><span th:inline="none">[[...]] = </span>[[${data}]]</li>
<li><span th:inline="none">[(...)] = </span>[(${data})]</li>

• 위의 예제에서unescaped로 설정된 데이터는 <b>태그를 그대로 적용한다.

출력

th:text = Hello < b >spring!< b >
th:utext = Hello spring!
[[...]] = Hello < b >spring!< b >
[(...)] = Hello spring!

 

(+) th:inline="none" : 이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다.

실제 서비스에서는 escape를 기본으로 하고, 꼭 필요할 때만 unescape를 사용하자.

---

변수 표현 - SpringEL

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

 

변수 표현식 : ${…}

<td th:text="${item.price}">10000</td>

• 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
• 프로퍼티 접근법을 사용한다. (${item.price}는 item.getPrice()의 방법으로 접근한다.)

---

1. Object 표현

model.addAttribute("user",userA);
User 객체가 있다고 해보자.
userA의 속성을 꺼낼 때 , 세가지 방법을 이용할 수 있다.

<li><span th:text="${user.username}"></span></li>
<li><span th:text="${user['username']}"></span></li>
<li><span th:text="${user.getUsername()}"></span></li>

모두 userA의 username 속성의 값이 출력된다.

---

2. List

model.addAttribute("users",userList);
userList<User>에 userA, userB, userC가 담겨 있을때, 세가지 방법을 이용할 수 있다.

<li><span th:text="${users[0].age}"></span></li>
<li><span th:text="${users[0]['age']}"></span></li>
<li><span th:text="${users[0].getAge()}"></span></li>

모두 userA의 age 속성의 값이 출력된다.

---

3. Map

model.addAttribute("userMap",userMap);
userMap<String,User>에 userA, userB, userC 가 담겨 있을때,
세가지 방법을 이용할 수 있다.
userMap의 key는 username 이다.

<li><span th:text="${userMap['userA'].age}"></span></li>
<li><span th:text="${userMap['userA']['age']}"></span></li>
<li><span th:text="${userMap['userA'].getAge()}"></span></li>

모두 userA의 age 속성의 값이 출력된다.

---

(참고) 지역변수 선언 th:with

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

• first가 users[0]에 들어있는 user 객체가 된다.
• 해당 태그 내에서 first.username으로 first 객체의 username 속성을 가져올 수 있다.

---

URL 링크

URL 링크 표현식 @{...}

th:href="@{...}

---

데이터 example

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

• /hello : URL 매핑
• basic/link : html파일

---

1) 단순 링크

<li><a th:href="@{/hello}">basic url</a></li>

• url : /hello

2) 쿼리 파라미터 생성

<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">
helloqueryparam</a></li>

• url : /hello?param1=data1$param2=data2

3) Path Variable

<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1},param2=${param2})}">
path variable</a></li>

• url : /hello/data1/data2

4) PathVariable + 쿼리 파라미터

<li><a th:href="@{/hello/{param1}(param1=${param1},param2=${param2})}">
path+query</a></li>

• url : /hello/data1?param2=data2
• param1은 앞쪽의 {param1}에 대입되고,
• 대입될 것이 없는 param2는 쿼리 파라미터로 적용된다.

(ex) URL 링크 간단히

th:href="@{|/basic/items/${item.id}|}"

• 리터럴 대체 문법 활용

---

Literal

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

(ex) 리터럴

• 문자 : ‘hello’
• 숫자 : 10
• 불린 : true , false
• null : null

---

1) 작은따옴표 규칙

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

ex) <span th:text="'hello'">

그러나 공백 없이 쭉 이어지는 문자열은 하나의 의미있는 토큰으로 인정해서 작은따옴표를 생략할 수 있다.

Rule) : A-Z , a-z , 0-9 , [ ] , . , - , _ → 이 문자들로 공백이 없는 경우

ex) <span th:text="hello">

공백이 있는 경우

(오류) ex) <span th:text="hello world!!">

(수정) ex) <span th:text="'hello world!!'">

---

2) 리터럴 대체 - |...|

(기존)타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 더해서(+) 사용해야 한다.

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

(리터럴) 이럴 때 리터럴 대체 문법을 사용하면 더하기(+) 없이 편하게 사용할 수 있다.

<span th:text="|Welcome to our application, ${user.name}!|">

 

---

(예제)

<!-- <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>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>

 

---

 

(참고) 김영한님 인프런 Spring MVC-2
https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2