Thymeleaf#1 기본기능

공식 레퍼런스에 친절하게 적혀있지만, 설명을 읽는 것 보단 예제를 보는게 훨씬 이해가 쉽다. 해당 글을 쭉 읽어보며 기본기를 익히고 추가로 필요할 때 공식 레퍼런스를 참고해서 사용하도록 하자.

# 공식 레퍼런스

HTML의 형태를 유지하면서 사용할 수 있는 타임리프는사용하기 쉽다. 화려한 클라이언트가 필요하다면 React, Vue같은 자바스크립트 프레임워크를 사용하는게 맞지만, 간단한 페이지나 UX, UI가 크게 중요하지않는 관리자용 HTML 같은 경우에는 여전히 쓸만하다. 백엔드 개발자라고 하더라도, View 템플릿 엔진 하나정도는 알아둬야한다. 하나만 배우면 다 비슷비슷하긴 하지만 Thymeleaf 가 스프링에서 공식적으로 밀어주고 있어서 같이 쓰기 편리하다.

공식 사이트: https://www.thymeleaf.org/
공식 메뉴얼 - 기본 기능: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
공식 메뉴얼 - 스프링 통합: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html

Tutorial: Thymeleaf + Spring

Preface This tutorial explains how Thymeleaf can be integrated with the Spring Framework, especially (but not only) Spring MVC. Note that Thymeleaf has integrations for both versions 3.x and 4.x of the Spring Framework, provided by two separate libraries c

www.thymeleaf.org

* 참고로 xhtml, thymeleaf 처럼 HTML에 커스텀 태그를 추가로 사용하는 경우, <html>속성으로 xmlns (xml namespace)를 지정해주어야 다른 템플릿과 충돌을 방지하고 해당 HTML에 타임리프가 사용되었음을 명시적으로 표시할 수 있다.

<!DOCTYPE html>
<!-- 일반 옵션(xmlns) 대신 타임리프 옵션(xmlns:th) 사용하면, 타임리프 렌더링 이후 해당 속성을 삭제한다. -->
<html xmlns:th="http://www.thymeleaf.org">
...

# Thymeleaf 에서 사용하는 표현식

타임리프는 보통 HTML 태그의 속성을 이용하여 서버에서 렌더링할 내용을 표시한다. 그래서 HTML 파일을 그대로 사용할 수 있다. 태그의 속성이 아니라 내용에 사용하고 싶다면 [[...]] 를 사용하면 된다.

모델 객체에 있는 값 data = "Hello World" 일 때

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

th:text를 사용하면 &lt;tag&gt;내용&lt;/tag&gt;은 타임리프 렌더링시 없어지게 된다.

참고로 위의 예제에서 사용된 [[ ... ]] 는 thymeleaf 변수임을 나타내는 기능도 있지만, < > 와 같은 HTML 예약문자를 문자열(&lt)로 만들어주는 역할도 한다. 만약 의도적으로 문자열이 아닌 HTML 태그로 인식되게 하고 싶다면 th:utext 또는 [(...)] 를 사용하면 된다.

그 외 제공하는 표현식은 아래와 같은데, 굳이 외우지 않아도 사용하다보면 자연스럽게 알게된다.

//• 간단한 표현:
  ◦ 변수 표현식: ${...}
  ◦ 선택 변수 표현식: *{...}
  ◦ 메시지(외부 라이브러리) 표현식: #{...}
  ◦ 링크 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: _

# 주석 (Comment)

타임리프 주석을 사용하면 렌더링시 HTML 자체에서 주석을 삭제해버린다.

프로토타입은 주석을 위한 기능은 아니고, 타임리프 렌더링 후에만 해당 태그를 보이도록 만들어주는 기능이다.

<!-- 1. HTML 주석 -->


<h1> 2. 타임리프 Parser용 주석. 아예 읽지않고 렌더링시 삭제해버림 </h1>
<!--/* Thymeleaf 주석 */-->


<!--/*-->
  <span th:text="${data}">여러줄 Thymeleaf 주석</span>
<!--*/-->


<h1>3. 타임리프 프로토타입 주석. 거의 사용할 일 없음</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/-->

# 모델을 사용하는 방법

아래와 같은 Controller와 Domain이 있다고 가정하자.

@Data // = @Get, @Set, @toStr, @Equals&Hashcode, @ReqArgs
static class User {
  private String username;
  private int age;

  public User(String username, int age) {
    this.username = username;
    this.age = age;
  }
}


@GetMapping("/variable")
public String variable(Model model) {
  User userA = new User("UserA", 10);
  User userB = new User("UserB", 20);

  List<User> list = Arrays.asList(userA, userB);
  Map<String, User> map = Map.of("userA", userA, "userB", userB); // Java9

  model.addAttribute("user", userA);
  model.addAttribute("userList", list);
  model.addAttribute("userMap", map);

  return "basic/variable";
}

이렇게 model에 담은 객체, 값은 아래와 같이 HTML 태그의 속성으로 사용할 수 있다. 참고로 th태그를 사용했을 때 안의 내용은 서버에서 렌더링 될 때 없어진다.

<span th:text="${userMap['userA'].username}"> 대체 텍스트(렌더링시 삭제) </span>

<ul> 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>
</ul>
<ul> List
  <li> 값: <span th:text="${userList[0].username}"></span></li>
  <li> 값: <span th:text="${userList[0]['username']}"></span></li>
  <li> 값: <span th:text="${userList[0].getUsername()}"></span></li>
</ul>
<ul> Map
  <li> 값: <span th:text="${userMap['userA'].username}"></span></li>
  <li> 값: <span th:text="${userMap['userA']['username']}"></span></li>
  <li> 값: <span th:text="${userMap['userA'].getUsername()}"></span></li>
</ul>

# 웹 기본 객체 (req, resp, session, servletcontext, locale)

모델 사용법과 같다. 사용할 객체에 ${#name} 으로 표시해주면 된다.
다만 request는 자주 사용하게 되는데, 매번 HttpServletRequest 객체를 주기에 사용하기 불편하다.
그래서 타임리프에서는 요청 파라메타 용도로 param이라는 편의용 객체를 추가로 제공한다. param.name 으로 사용가능

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

https://path/mypage?paramData=HelloParam

예제에도 나와있지만, ${@springBean}으로 스프링 빈 객체에 접근할 수도 있다.

// <li>spring bean = <span th:text="${@helloBean.hello('Spring!')}"></span></li>

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

# 유틸리티 라이브러리 객체

Tutorial: Using Thymeleaf 필요할 때 찾아보면 된다. 사용법은 웹 기본객체와 동일하다.

Java8에 추가된 날짜 객체는 ${#temporals} 로 사용할 수 있다. 레퍼런스에 안적혀있어서 추가.

//<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

@GetMapping("/date")
public String date(Model model) {
  model.addAttribute("localDateTime", LocalDateTime.now());
  return "basic/date";
}

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#expression-utility-objects

# URL 링크

th:href 와 @{/link} 를 이용하면 된다. ( name = ${value} ) 를 이용하여 경로 변수를 지정해 줄 수 있다. 단 적어놓고 사용하지 않은 변수는 자동으로 파라메타 ?name=value 로 추가되게 된다.

참고로 @{} 쓰지않고, HTML 태그마냥 바로 th:href="/" 박아도 된다.
링크식 @{} 사용하게되면 상대경로를 유연하게 사용할 수 있다. 서블릿 컨텍스트(톰캣 인스턴스) 기준으로 찾아주기 때문에, 프로젝트 루트 경로가 달라졌더라도 url 변경없이 바로 사용할 수 있다.

<ul>
  <li><a th:href="@{/hello}">basic url</a></li>
  
  <!-- /hello?param1=data1&param2=data2 -->
  <li><a th:href="@{/hello(param1=${data1}, param2=${data2})}"> query param</a></li>
  
  <!-- /hello/data1/data2 -->
  <li><a th:href="@{/hello/{param1}/{param2} (param1=${data1}, param2=${data2})}">path variable</a></li>
  
  <!-- /hello/data1?param2=data2 -->
  <li><a th:href="@{/hello/{param1} (param1=${data1}, param2=${data2})}">path var + query param</a></li>
</ul>

# 리터널과 연산자

10.5, true, false, null 그냥 사용하면 되긴하지만, 몇가지 주의사항만 알아보자.

문자 리터널에 공백을 넣고싶다면 작은 따음표('~')로 감싸면 된다. 그냥 공백을 넣으면 오류가 난다.

'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span>
'hello world!' = <span th:text="'hello world!'"></span>

문자열을 쉽게 생성하는 [리터널 대체 문법]이 존재한다. | ~ | 를 사용해서 바로 쓰면 된다. (Js, Kotlin과 비슷)

'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span>
리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span>

산술연산, 조건식은 Java와 완벽하게 동일하다. 결국 Java로 돌아가는 거니까

10 + 2 = <span th:text="10 + 2"></span>
10 % 2 == 0 = <span th:text="10 % 2 == 0"></span>

(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)?  '짝수':'홀수'"></span>

단, 비교연산의 경우 HTML 태그와 겹치는 문자 < > 는 전용 기호를 사용해야 한다.

1 > 10 = <span th:text="1 &gt; 10"></span> <!-- 순수 HTML에서는 &gt; 이런식으로 사용된다 -->
1 gt 10 = <span th:text="1 gt 10"></span>
1 >= 10 = <span th:text="1 >= 10"></span>
1 ge 10 = <span th:text="1 ge 10"></span>
1 == 10 = <span th:text="1 == 10"></span>

# Elvis 연산자 ( null 처리, ${data}?: )

조건식의 축약버전이라고 생각하면 된다. 데이터가 없을 때 반환할 대체 값을 지정할 수 있다.

${data}? = <span th:text="${data}?: '데이터가 없습니다.'"></span></li>
${nullData}? = <span th:text="${nullData}?:  '데이터가 없습니다.'"></span></li>

파이썬 처럼 _ 를 사용할 수 있다. _ 가 선택된 경우 해당 태그는 렌더링 되지 않고 HTML 그대로 출력된다.

${data}? = <span th:text="${data}?: _">데이터가 없습니다.</span>
${nullData}? = <span th:text="${nullData}?: _">데이터가 없습니다.</span>

# 태그 속성 값 설정

<tag th:속성="~"> 으로 적으면, 타임리프 렌더링 시 <tag 속성="~"> 으로 바꿔준다.

그냥 속성을 사용해도 된다. 단 th:속성을 이용하면 아래의 태그들을 이용해 속성을 바꿀 수 있다.
th:attrappend : 속성 값의 뒤에 값을 추가한다.
th:attrprepend : 속성 값의 앞에 값을 추가한다.
th:classappend : class 속성으로 해당 값을 추가한다.

- th:attrappend = <input type="text" class="text" th:attrappend="class='large'" /><br/>
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large'" /><br/>
- th:classappend = <input type="text" class="text" th:classappend="large" /><br/>

또는 아래와 같이 체크박스 처리등을 할때 th:checked를 사용하면 boolean 로직을 만들기 편하다.

- checked o <input type="checkbox" name="active" th:checked="true" /><br/>
- checked x <input type="checkbox" name="active" th:checked="false" /><br/>

<!-- 기존의 HTML은 checked 속성이 있으면 그냥 체크해버림 checked=boolean 옵션 없음 -->
- checked=false <input type="checkbox" name="active" checked="false" /><br/>

# 반복문 (th:each)

아래와 같은 users 가 주어졌을 때 th:each="user : ${users}"로 순회할 수 있다. 이렇게 작성하면 user를 사용한 태그가 가 배열의 개수만큼 반복된다.

Map의 경우 인자로 Entry(key, value)가 담기게 된다.

@GetMapping("/each")
public String each(Model model) {
  addUsers(model);
  return "basic/each";
}

private void addUsers(Model model) {
  List<User> list = new ArrayList<>();
  list.add(new User("userA", 10));
  list.add(new User("userB", 20));
  list.add(new User("userC", 30));

  model.addAttribute("users", list);
}

<table border="1">
  <tr th:each="user : ${users}">
    <td th:text="${user.username}">username</td>
    <td th:text="${user.age}">0</td>
  </tr>
</table>

th:each를 사용할 때, 2번째 인자(ex. userStat)를 주어서 반복 인덱스, 전체크기, 편의용 조건연산자등을 사용할 수 있다.

<tr th:each="user, userStat : ${users}"> <!-- 이름은 변경해도 된다. -->

index 0부터 시작 = <span th:text="${userStat.index}"></span>
count 1부터 시작 = <span th:text="${userStat.count}"></span>
size 배열 크기 = <span th:text="${userStat.size}"></span>
even? 짝수여부 boolean = <span th:text="${userStat.even}"></span>
odd? 홀수여부 boolean = <span th:text="${userStat.odd}"></span>
first? 처음여부 boolean = <span th:text="${userStat.first}"></span>
last? = 마지막여부 boolean = <span th:text="${userStat.last}"></span>
current = 현재 객체 = <span th:text="${userStat.current}"></span>

# 조건문 ( th:if , th:unless , th:switch )

조건을 만족하지 않았을 때, 해당 태그를 없애버릴 수 있다. 참고로 unless는 if의 부정문이다.

switch에서 default case는 th:case="*" 로 지정할 수 있다.

<span th:text="${user.age}">0</span>
<span th:text="'20살'" th:if="${user.age == 20}"></span>
<span th:text="'20살이상'" th:if="${user.age ge 20}"></span>
<span th:text="'20살미만'" th:unless="${user.age ge 20}"></span>

<td th:switch="${user.age}">
 <span th:case="10">10살</span>
 <span th:case="20">20살</span>
 <span th:case="*">기타</span>
</td>

# 블록 <th:block>

타임리프는 HTML 문법을 그대로 사용한다. 유일하게 <th:block>만 타임리프 전용 태그를 사용하는데, 어차피 렌더링되면 사라지기 때문이다.

React의 <Fragment>와 비슷하다. 특정 태그로 감싸지 않고 그대로 사용하기 위해서 쓴다.

<!-- th:block은 렌더링시 사라진다. 안에 있는 내용만 남게된다. -->
<th:block th:each="user : ${users}">
  <div>
    사용자 이름1 <span th:text="${user.username}"></span>
    사용자 나이1 <span th:text="${user.age}"></span>
  </div>
  <div>
    요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
  </div>
</th:block>

# 자바스크립트 인라인 script th:inline="javascript"

타임리프에서 자바스크립트 인라인 <script>를 사용하고자하면, 반드시 <script th:inline="javascript"> 옵션을 주어야 한다. 이는 기존 태그들을 th:tag로 대체해서 사용하는 이유와 비슷하다.

<!-- 자바스크립트 인라인 사용 전 -->
<script>
  var username = [[${user.username}]]; // 그냥 타임리프 문법을 추가한 경우
  var age = [[${user.age}]];
  
  //주석을 이용해 순수 자바스크립트만 사용할 수도 있다. user.username 이 대신들어감.
  var username2 = /*[[${user.username}]]*/ "test username";
  
  //객체
  var user = [[${user}]];
</script>

해당 스크립트를 HTML로 렌더링하면 오류가 발생한다. 그 이유는 결과 HTML을 보면 알 수 있다.

"userA"는 변수가 아니라 타임리프에서 렌더링한 문자열 값이다. 따음표(")로 감싸주어야 한다.

코드상에서 "" 를 추가하면 될까? 렌더링 때 진짜 "문자열"인지 타임리프 변수인지 어떻게 구분할 수 있을까?

// 이게 타임리프 변수인지, 그냥 "[[..]]" 문자열인지 어떻게 알 수 있을까?
var username = "[[${user.username}]]";

이런 경우를 해결하기 위해서, 타임리프에는 <script th:inline = "javascript"> 를 사용하는 것이다.

&lt;script th:inline = "javascript"&gt; 를 사용하면 바뀌는 것

<!-- th:inline = "javascript 사용시 렌더링 결과HTML -->
<script>
  var username = "userA"; // 문자열은 따음표로 감싸준다
  var age = 10; // 숫자는 그대로 처리
  
  var username2 = "userA"; // 자바스크립트 타임리프 처리도 깔끔하게 해줌.
  var user = {"username":"userA","age":10}; // 객체는 코드를 JSON{..} 문법으로 바꿔준다
</script>

# 자바스크립트 안에서 타임리프의 th:each 사용

[# th:each= "..." ] ~Javascript Code~ [/] 를 사용하면 된다.

<script th:inline="javascript">
   [# th:each="user, stat : ${users}"]
   var user[[${stat.count}]] = [[${user}]];
   [/]
</script>

<script> <!-- 렌더링 결과 -->
    var user1 = {"username":"userA","age":10};
    var user2 = {"username":"userB","age":20};
    var user3 = {"username":"userC","age":30};
</script>

# 템플릿 조각 (th:fragment)

먼저 재사용할 템플릿을 만들어두자. 보통 fragment 폴더를 만들어 모아두고는 한다.

태그에 th:fragment ="name" 을 이용하여 템플릿 이름과 입력받을 파라메타를 지정해줄 수 있다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <!-- footer.html 1번 템플릿 -->
  <footer th:fragment="copy">
    푸터 자리 입니다.
  </footer>

  <!-- footer.html 2번 템플릿 -->
  <footer th:fragment="copyParam (param1, param2)">
    <p>파라미터 자리 입니다.</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
  </footer>
</body>
</html>

이렇게 만든 템플릿은 아래와 같이 사용할 수 있다. (프로젝트 resource/templates를 베이스 경로로 탐색한다.)

insert는 해당 태그 안 내용에 만들고, replace는 해당 태그를 삭제한 후 만든다.

<h1>부분 포함 insert</h1>
<div th:insert="~{template/fragment/footer :: copy}"></div>
<!-- 프로젝트경로/resource/templates/template/fragment/footer.html 에 있는 copy 태그 -->

<h1>부분 포함 replace</h1>
<div th:replace="~{template/fragment/footer::copy}"></div>

<h1>파라미터 사용</h1>
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></div>

다만 ~{...} 를 생략해도 경로 인식이 가능한 경우, 생략해도 똑같이 동작한다.

<!-- ~{}는 생략가능 -->
<div th:replace="template/fragment/footer :: copy"></div>
<div th:replace="template/fragment/footer :: copyParam ('데이터1', '데이터2')"></div>

# 재사용가능한 레이아웃 만들기

아래와 같이 th:replace를 지정해주면, 해당 태그 안에 있는 내용이 삭제되고 지정한 템플릿으로 교체된다.

이때, 템플릿에서 [특정 태그 안의 기존 내용] 을 재사용할 수 있다.

파라메타에 ~{::TagName} 를 사용하면 내용에 적혀있는 모든 해당 태그(TagName)를 파라메타로 넘긴다.

교체되기 전 &lt;head&gt; 태그안에 있던 내용을 파라메타로 입력받을 수 있다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- head 태그와 내용은 삭제되고, common_header로 교체됨 -->
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
  <title>메인 타이틀</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>

<body>
메인 컨텐츠
</body>
</html>

th:replace를 사용하는 경우 어차피 교체될거라 기존 태그를 무엇을 사용하던 상관없다. (대충 th:block으로 해도됨)
하지만 태그를 의미있게 사용하는게, 템플릿을 만들때도 편하고 HTML의 가독성도 올라간다.
참고로 ~{::tag} 로 받았는데, 기존코드에 해당태그가 3개라면, th:replace에서도 반복문처럼 3개 연달아 만들어진다.

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

  <!-- common_header 템플릿 정의, template/layout/base.html-->
  <head th:fragment="common_header(myTitle, myLinks)">
      <!-- 추가, 파라메타 입력으로 받은 수만큼 title 태그를 만듬. -->
      <title th:replace="${myTitle}">레이아웃 타이틀</title>

      <!-- 공통, 모든 곳에 공통 레이아웃을 적용 -->
      <link media="all" rel="stylesheet" th:href="@{/css/awesomeapp.css}" type="text/css">
      <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
      <script th:src="@{/sh/scripts/codebase.js}" type="text/javascript"></script>

      <!-- 추가, 파라메타 입력으로 받은 수 만큼 link 태그를 그대로 전달함. -->
      <th:block th:replace="${myLinks}"/>
  </head>
  
</html>

# 전체 HTML에 공통 레이아웃 적용하기 (Extends)

<html> 태그에 템플릿을 적용하면, 페이지에 공통적인 레이아웃을 적용하고 필요할 때 구조를 변경할 수 있다.

<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: myLayout(~{::title}, ~{::section})}"
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>메인 페이지 타이틀</title>
  </head>
  
  <body>
    <section>
      <p>메인 페이지 컨텐츠</p>
      <div>메인 페이지 포함 내용</div>
    </section>
  </body>
</html>

전체 HTML이 아래 템플릿을 거쳐서 렌더링 된다. 관리하는 페이지가 많을 경우 유용하게 사용할 수 있다.
이 때 th:replace를 사용한 태그는, 어차피 내용이 삭제되므로 주석으로 사용하면 유용하다.

<!DOCTYPE html>
<!-- template/layoutExtend/layoutFile.html 안에 있는 layout(title, content) 템플릿 -->
<html th:fragment="myLayout (title, content)" xmlns:th="http://www.thymeleaf.org">

  <head>
   <title th:replace="${title}">~ 적용될 타이틀 th:replace라 이 텍스트는 삭제됨~</title>
  </head>

<body>
  <h1>레이아웃 H1</h1>
  
  <div th:replace="${content}">
   <p>~ 적용될 컨텐츠, th:replace라 이 텍스트는 삭제됨 ~</p>
  </div>
  
  <footer>
   레이아웃 푸터
  </footer>
</body>
</html>

# 선택변수 *{...} 와 th:object

선택변수 *{...} 와 th:object 를 이용해서 객체에서 값을 꺼낼 때 중복되는 코드를 줄일 수 있다.
myClass.session.user 이런 코드를 th:object= ${myClass.session}로 선언하고, 이후 *{user} 로 편하게 사용하는 기능.

당연한거지만, th:object를 적은 태그 내부(하위 태그)에서만 사용할 수 있다.

<!-- 렌더링 전, 선택 변수 *{...} 사용 -->
<div th:object="${session.user}">
  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

<!-- 렌더링 이후 -->
<div>
  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>

# 메시지 기능 #{...}

위에서 웹 기본 객체나 외부 라이브러리를 ${#...} 으로 사용할 수 있다고 했다.

그냥 외부 파일의 값을 읽어오고 싶은경우 #{...}을 사용하면 된다. thymeleaf engine 경로에 미리 만들어져있는 프로퍼티 파일(message properties)이 존재하는 경우 외부에서 해당 값을 가져오는 기능이다.

이는 나중에 국제화 & 메시지 기능을 배우게되면 왜 이런걸 따로 제공하는지 알 수 있게된다.

// message properties 파일
home.welcome = 안녕하세요? 반갑습니다
home.param = 이건 {0} 파라메타 {1}.

<p th:text="#{home.welcome}">인사말</p>
<p th:text="#{home.param(${name}, ${end})}">인사말(고객명)</p>

스프링에서 받은 Model 안에 [ name= "강아지", end= "입니다" ] 이렇게 저장되어있다면 아래와 같이 렌더링 된다.

<p> 안녕하세요? 반갑습니다 </p>
<p> 이건 강아지 파라메타 입니다. </p>

'🌱 Spring Framework > Spring MVC' 카테고리의 다른 글

Spring 메시지, 국제화 기능 (0)	2021.08.28
Thymeleaf#2 Spring과 HTML Form 처리 (0)	2021.08.28
#2 HTTP API 요청 매핑, 헤더 조회 (0)	2021.08.11
#1 HTTP 요청 매핑과 기본 로깅 (0)	2021.08.11
# HTTP 데이터 전송/응답 (0)	2021.08.11

블로그의 정보

JiwonDev

Thymeleaf#1 기본기능

# 공식 레퍼런스

# Thymeleaf 에서 사용하는 표현식

# 주석 (Comment)

# 모델을 사용하는 방법

# 웹 기본 객체 (req, resp, session, servletcontext, locale)

# 유틸리티 라이브러리 객체

# URL 링크

# 리터널과 연산자

# Elvis 연산자 ( null 처리, ${data}?: )

# 태그 속성 값 설정

# 반복문 (th:each)

# 조건문 ( th:if , th:unless , th:switch )

# 블록 <th:block>

# 자바스크립트 인라인 script th:inline="javascript"

# 자바스크립트 안에서 타임리프의 th:each 사용

# 템플릿 조각 (th:fragment)

# 재사용가능한 레이아웃 만들기

# 전체 HTML에 공통 레이아웃 적용하기 (Extends)

# 선택변수 *{...} 와 th:object

# 메시지 기능 #{...}

'🌱 Spring Framework > Spring MVC' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

# 공식 레퍼런스

# Thymeleaf 에서 사용하는 표현식

# 주석 (Comment)

# 모델을 사용하는 방법

# 웹 기본 객체 (req, resp, session, servletcontext, locale)

# 유틸리티 라이브러리 객체

# URL 링크

# 리터널과 연산자

# Elvis 연산자 ( null 처리, ${data}?: )

# 태그 속성 값 설정

# 반복문 (th:each)

# 조건문 ( th:if , th:unless , th:switch )

# 블록 <th:block>

# 자바스크립트 인라인 script th:inline="javascript"

# 자바스크립트 안에서 타임리프의 th:each 사용

# 템플릿 조각 (th:fragment)

# 재사용가능한 레이아웃 만들기

# 전체 HTML에 공통 레이아웃 적용하기 (Extends)

# 선택변수 *{...} 와 th:object

# 메시지 기능 #{...}

'🌱 Spring Framework > Spring MVC' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바