[Thymeleaf] 문법 및 사용법 정리

이번 포스트에서는 SpringBoot에서 자주 사용하는 Thymeleaf에 대해서 알아보겠습니다.

 

목차

1. Thymeleaf 란?

2. Thymeleaf 문법 및 사용법

3. Thymeleaf 예제

 

1. Themeleaf 란?

 

java 라이브러리로 웹 및 독립된 환경 모두를 위한 템플릿 엔진으로써, 확장성이 매우 높고 Spring Framework 용 모듈 및 플러그인 할 수 있는 기능을 제공하므로 최신 HTML5 JVM 웹 개발에 이상적입니다. HTML에 데이터를 맵핑하여 하나의 View를 Generate한다는 개념과 HTML 친화적인 문법을 사용하기 때문에 Front-End 개발자와 Back-End 개발자 간의 업무 효율성이 높아져 협업이 쉽게 이루어질 수 있습니다.

 

기본적으로 Thymeleaf는 HTML, XML, TEXT, JAVASCRIPT, CSS, RAW 6가지 템플릿을 처리할 수 있으며, 각 템플릿을 템플릿 모드라고 합니다. 

 

2. Themeleaf 문법 및 사용법

 

 

• Simple expressions:
  • Variable Expressions: ${...}
  • Selection Variable Expressions: *{...}
  • Message Expressions: #{...}
  • Link URL Expressions: @{...}
  • Fragment Expressions: ~{...}
• Literals
  • Text literals: 'one text', 'Another one!',…
  • Number literals: 0, 34, 3.0, 12.3,…
  • Boolean literals: true, false
  • Null literal: null
  • Literal tokens: one, sometext, main,…
• Text operations:
  • String concatenation: +
  • Literal substitutions: |The name is ${name}|
• Arithmetic operations:
  • Binary operators: +, -, *, /, %
  • Minus sign (unary operator): -
• Boolean operations:
  • Binary operators: and, or
  • Boolean negation (unary operator): !, not
• Comparisons and equality:
  • Comparators: >, <, >=, <= (gt, lt, ge, le)
  • Equality operators: ==, != (eq, ne)
• Conditional operators:
  • If-then: (if) ? (then)
  • If-then-else: (if) ? (then) : (else)
  • Default: (value) ?: (defaultvalue)
• Special tokens:
  • No-Operation: _

출처 : (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax)


표현식 : th:[attribute] = 조건식 및 서버에서 받은 데이터

아래와 같이 th:[attribute]의 수많은 속성이 있으며, 각 속성은 특정 HTML5 속성을 대상으로 합니다.

th:abbr	th:accept	th:accept-charset
th:accesskey	th:action	th:align
th:alt	th:archive	th:audio
th:autocomplete	th:axis	th:background
th:bgcolor	th:border	th:cellpadding
th:cellspacing	th:challenge	th:charset
th:cite	th:class	th:classid
th:codebase	th:codetype	th:cols
th:colspan	th:compact	th:content
th:contenteditable	th:contextmenu	th:data
th:datetime	th:dir	th:draggable
th:dropzone	th:enctype	th:for
th:form	th:formaction	th:formenctype
th:formmethod	th:formtarget	th:fragment
th:frame	th:frameborder	th:headers
th:height	th:high	th:href
th:hreflang	th:hspace	th:http-equiv
th:icon	th:id	th:inline
th:keytype	th:kind	th:label
th:lang	th:list	th:longdesc
th:low	th:manifest	th:marginheight
th:marginwidth	th:max	th:maxlength
th:media	th:method	th:min
th:name	th:onabort	th:onafterprint
th:onbeforeprint	th:onbeforeunload	th:onblur
th:oncanplay	th:oncanplaythrough	th:onchange
th:onclick	th:oncontextmenu	th:ondblclick
th:ondrag	th:ondragend	th:ondragenter
th:ondragleave	th:ondragover	th:ondragstart
th:ondrop	th:ondurationchange	th:onemptied
th:onended	th:onerror	th:onfocus
th:onformchange	th:onforminput	th:onhashchange
th:oninput	th:oninvalid	th:onkeydown
th:onkeypress	th:onkeyup	th:onload
th:onloadeddata	th:onloadedmetadata	th:onloadstart
th:onmessage	th:onmousedown	th:onmousemove
th:onmouseout	th:onmouseover	th:onmouseup
th:onmousewheel	th:onoffline	th:ononline
th:onpause	th:onplay	th:onplaying
th:onpopstate	th:onprogress	th:onratechange
th:onreadystatechange	th:onredo	th:onreset
th:onresize	th:onscroll	th:onseeked
th:onseeking	th:onselect	th:onshow
th:onstalled	th:onstorage	th:onsubmit
th:onsuspend	th:ontimeupdate	th:onundo
th:onunload	th:onvolumechange	th:onwaiting
th:optimum	th:pattern	th:placeholder
th:poster	th:preload	th:radiogroup
th:rel	th:rev	th:rows
th:rowspan	th:rules	th:sandbox
th:scheme	th:scope	th:scrolling
th:size	th:sizes	th:span
th:spellcheck	th:src	th:srclang
th:standby	th:start	th:step
th:style	th:summary	th:tabindex
th:target	th:title	th:type
th:usemap	th:value	th:valuetype
th:vspace	th:width	th:wrap
th:xmlbase	th:xmllang	th:xmlspace

3. Thymeleaf 예제

application.properties

api:
    url: https://www.test.co.kr

messages.properties

main.title=Hello World

Model

@Data
public class UserModel {
    private int seq;		// 회원고유번호
    private String id;		// 회원아이디
    private String userName;	// 회원명
    private String email;	// 이메일
    private String phone;	// 핸드폰번호
    private String sex;		// 성별
    private Date createDt;	// 등록일자
}

Controller

@Controller
public class userController {
    @Autowired
    UserService userService;
    
    @GetMapping("/userList")
    public String getUserList(Model model, userModel user) {
        
        // 회원리스트 가져오기
        List<userModel> userList = UserService.getUserList(model);
        model.addAttribute("userList", userList);
        model.addAttribute("title", 'Thymeleaf 소개');
        return "userList";
    }
}

HTML

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

<title th:text="${title}">Title</title>
<h1 th:text="#{main.title}"></h1>
<h1 th:text="${@environment.getProperty('api.url')}"></h1>

<body>
    <table>
        <tr>
            <th>이름</th>
            <th>아이디/이메일</th>
            <th>핸드폰번호</th>
            <th>성별</th>
            <th>등록일자</th>
        </tr>
        <tr th:each="user : ${userList}">
            <td th:text="${user.userName}"></td>
            <td th:text="|${user.id + ' / ' + user.email}|" th:href="@{'user/'+user.id}"></td>
            <td th:text="${user.phone}"></td>
            <td th:text="${user.sex == 'M' ? '남자' : '여자' }"></td>
            <td th:text="${#dates.format(user.createDt, 'yyyy-MM-dd HH:mm')}"></td>
        </tr>
    </table>
</body>
</html>

 

위의 HTML 코드를 하나씩 분석해보겠습니다.

1. 변수 선언식 ${}

 - 3번째 줄 ${title}은 controller에서 변수에 담아서 넘긴 title의 값이 맵핑되어 보입니다.

2. 메세지식 #{}

 - 4번째 줄에 #{main.title}은 message.properties에 선언된 값이 맵핑되어 보입니다.

3. 링크식 @{}

 - 19번째 줄에 @{'user/'+user.id} 링크 표현식을 통해 페이지 전환을 합니다.

4. 리터럴 치환 ||

 - 19번째 줄에 |${user.id + '/' +user.name}| 문자열을 합칠 때 양쪽 끝에 ||를 선언하여 사용합니다.

 

간략한 예제를 통하여 Thymeleaf에 대해서 알아보았습니다.

출처: https://ssd0908.tistory.com/entry/Thymeleaf-문법-및-사용법-정리-에스제이-티스토리 [에스제이]