ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Thymeleaf] 문법 정리
    Java/SpringBoot 2021. 1. 18. 21:39

    1. 타임리프란? 

     

    - HTML, XML, JS, CSS 등을 처리할 수 있는 server-side 자바 템플릿 엔진이자

     스프링부트에서 공식으로 지원하는 템플릿 엔진이다.

     

    - 우아하고 유지보수성이 높은 템플릿 개발을 목표로 만들어졌다.

     

    또한 HTML5 등의 web standard를 염두에 두고 개발되었다.

     

     

    2. 기본 표현식

    • 기본적인 표현:
      • Variable Expressions: ${...}
      • Selection Variable Expressions: *{...}
      • Message Expressions: #{...}
      • Link URL Expressions: @{...}
      • Fragment Expressions: ~{...}

     

    • 리터럴
      • 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,…

     

    • 텍스트 연산:
      • String concatenation: +
      • Literal substitutions: |The name is ${name}|

     

    • 산술 연산:
      • Binary operators: +, -, *, /, %
      • Minus sign (unary operator): -

     

    • 부울 연산:
      • Binary operators: and, or
      • Boolean negation (unary operator): !, not

     

    • 비교 연산:
      • Comparators: >, <, >=, <= (gt, lt, ge, le)
      • Equality operators: ==, != (eq, ne)

     

    • 조건 연산:
      • If-then: (if) ? (then)
      • If-then-else: (if) ? (then) : (else)
      • Default: (value) ?: (defaultvalue)

     

    • Special tokens:
      • No-Operation: _

     

    3. 기본 문법

     

    th:text

    <!DOCTYPE html>
    
    <html xmlns:th="http://www.thymeleaf.org">
    
      <head>
        <title>Good Thymes Virtual Grocery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" media="all" 
              href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
      </head>
    
      <body>
      
        <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
      
      </body>
    
    </html>

    th:text 속성에 의해 body안의 값 "Welcome to out grocery store!"은 서버에서 전달받은 home.welcome의 값으로 바뀌게 된다.

     

    th:value

    <input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>

    <form> 태그를 통해 입력을 받을 때 input 필드안의 값으로 어떤 변수값을 지정할지를 정할 수 있다.

     

    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>

    서버에서 객체를 가져올 때 쓰인다. 주로 Controller의 인자로 Model을 받아 속성으로 집어넣어주는 경우가 흔하다.

     

    객체의 경우 ${...}, 필드의 경우 *{...}이 쓰임을 유의하자.

     

    th:if

     

    <div th:if="${user.isAdmin()} == false"> ..

    user.isAdmin() == false라는 조건에 맞을 경우 해당 블록이 표시될 것이다.

     

    th:each

    <tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">

    foeach와 같은 의미다. prods라는 리스트의 모든 prod 객체에 대해 반복으로 표시한다.

     

    th:with

    <div th:with="isEven=(${prodStat.count} % 2 == 0)">

    변수값을 가져다 쓸 수 있다.

     

    th:switch

     

    <div th:switch="${user.role}">
      <p th:case="'admin'">User is an administrator</p>
      <p th:case="#{roles.manager}">User is a manager</p>
    </div>

    switch-case 구문이다.

    'Java > SpringBoot' 카테고리의 다른 글

    API 예외 처리  (0) 2022.08.18
    파일 업로드  (0) 2022.08.18
    타입 컨버터  (0) 2022.08.18
    예외 처리와 오류 페이지  (0) 2022.08.18
    의존성 주입 Dependency Injection. DI  (0) 2021.02.24
Designed by Tistory.