Develop/Spring

[SpringBoot] Thymeleaf 문법 정리

wltn.js 2022. 11. 15. 15:39

[기본 사용법]

  • 사용시 html 태그에 <html xmlns:th="http://www.thymeleaf.org"> 를 삽입한다.
  • tag 사이와  tag 안에서의 문법이 다르다. 아래 예시를 참고하자.
<!-- 예시 -->
<span th:text="${data}"></span>
<span>[[${data}]]</span>
  • tag는 반드시 닫아야 한다.
  • HTML 태그 중에서 th 태그를 이용해서 데이터를 표현한다.

⭐ th 기본 문법

- 표현식

  • 변수 표현식 :  ${   }  
  • 선택 변수 표현식 :  *{   }  
  • 메세지 표현식 :  #{   }  
  • 링크 URL 표현식 :  @{   } 
  • 조각 표현식 :  ~{   } 

- 문자연산

  • 문자 합치기 :  + 
  • 리터럴 대체 :  | hello ${data} |  

- 불린연산

  • Binary operators : and, or
  • Boolean negation : !, not

- 조건연산

  • if-then : (if) ? (then)
  • if-then-else : (if) ? (then) : (else)
  • deafult : (value) ?: (default value)

- 리터럴(고정값)

  • 텍스트 : 'text', 'text2', ...
    • 주의할 점 : string에 공백이 있을 경우 작은따옴표(' ')는 필수이다.
    • ex) "abcdef" : O   / "'abcdef'" : O   /  "abc def" : X   /  "'abc def'" : O
  • 숫자 : 0 ,1, 2.2, 3.0, ...
  • 불린 : true, false
  • 널 : null

- 비교

  • gt : >
  • lt : <
  • ge : >=
  • le : <=
  • eq : ==
  • ne : !=

⭐ 데이터 출력

  • inline
    • th:inline="none" : 태그 안의 내용은 타임리프가 해석하지 않는 옵션
    • th:inline="javascript" : 타임리프가 자바스크립트를 편리하게 사용할 수 있도록 해주는 옵션 
  • 텍스트 : text( [[...]] ), utext( [(...)] )
    • ex) &lt;b&gt;example&lt;/b&gt;
    • text : <b>example</b>
    • utext: example
  • SpringEL 표현식
    • 단순 변수가 아닌 Object나 List, Map같은 객체를 표현하는 경우
    • Object
      • data.field
      • data.['field']
      • data.getField()
    • List
      • list[n].field ( = list[n]['field'] )
      • list[n].getField()
      • list.get(n).data
    • Map
      • map['key'].field (= map.get('key').getField() = map['key']['field'] )
      • map['key'].getField()
  • 지역변수
    • th:with : 선언한 태그 안에서만 사용 가능
<!-- 예시 -->
<div th:with="item=${list[0]}">
<span th:text="${item.name}"></span>

 

[주석]

  • 한 줄 : <!--/*  data  */-->
  • 여러줄 : <-!-/*-->  \n data \n <!--/*-->
<!--/* [[${data}]] */-->

<!--/*-->
<span th:text="${data}">text</span>
<!--*/-->

[조건부 평가]

[반복] th:each

  • th:each
  • 일반 사용법
    • th:each = "item : ${list}"
<!-- 예시 -->
<tr th:each="user : ${users}">
    <td th:text="${user.username}">userName</td>
    <td th:text="${user.age}">0</td>
</tr>
  • 상태값 접근 사용법 (리스트 + Stat)
    • th:each = "item, itemStat : ${lists}"
    • 이렇게 사용하면 list의 전체크기, 홀/짝 여부, 처음/끝 여부 등을 확인할 수 있다.
<!-- 예시 -->
<tr th:each="user, userStat : ${users}">
    <td th:text="${userStat.count}">userCount</td>
    <td th:text="${user.username}">userName</td>
	<td th:text="${user.age}">0</td>
    <td>
    <!-- Stat으로 알 수 있는 상태값 -->
            index = <span th:text="${userStat.index}"></span>
            count = <span th:text="${userStat.count}"></span>
            size = <span th:text="${userStat.size}"></span>
            even? = <span th:text="${userStat.even}"></span>
            odd? = <span th:text="${userStat.odd}"></span>
            first? = <span th:text="${userStat.first}"></span>
            last? = <span th:text="${userStat.last}"></span>
            current = <span th:text="${userStat.current}"></span>
    </td>
</tr>

 

[유틸리티] #

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

[템플릿] th:fragment

  • 헤더, 푸터, 카테고리 등과 같이 페이지마다 공통으로 쓰이는 부분을 템플릿화 하여 불러올 수 있다.
  • 파라미터에는 변수는 물론 HTML 태그 자체도 넘겨줄 수 있다.
  • 공통 태그 선언 방식
    • th:frament="frg" : 파라미터가 없는 일반 공통 태그
    • th:fragment="frgParam (param1, param2) : 파라미터가 들어간 공통 태그 선언
      • 파라미터 사용 예시 : th:text="${param1}"
  • 공통태그를 선언했다면 주입(insert)과 교체(replace)를 통해 템플릿을 넣을 수 있다.
  • 문법예시
    • <div>th:insert="~{template/fragment/footer :: frg}"</div>
    • <div>th:insert="~{template/fragment/footer :: frgParam ('data1', 'data2') }"</div>
    • <div>th:replace="~{template/fragment/footer :: frg}"</div> 
  • 문법예시 2
    • 대상 html (main)
      • <head th:fragment="frg_main(mainTitle, mainLink)">
            <title th:replace="${mainTitle}">대상 HTML 타이틀</title>
            <th:block th:replace="${mainLink}"/>  <!-- 이때 전달받는 link가 여러개여도 무방 -->
        </head>
    • 레이아웃 html
      • <head th:replace="template/layout/main :: frg_main(~{::title},~{::link})">
            <title>레이아웃 HTML 타이틀</title>
            <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
            <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
        </head>

[script 삽입] th:src

  •  <script> 태그 안에 th:src="js경로" type="text/javascript"></script>
<script th:src="@{/js/common/dashboard/detailChart.js}" type="text/javascript"></script>

 

'Develop > Spring' 카테고리의 다른 글

[Spring, JPA] Page 2 of 1 containing UNKNOWN instances  (0) 2023.01.16
[SpringBoot] jar파일 생성 및 실행  (4) 2023.01.12
[VSCode] vscode에서 Spring Boot Maven 프로젝트 생성하기(환경구성)  (0) 2022.11.16
[SpringBoot/STS4] Thymeleaf 프로젝트 생성하기  (0) 2022.11.15
Maven 설치 및 환경 변수 설정(feat. windows)  (1) 2022.11.11

'Develop/Spring'의 다른글

  • 현재글[SpringBoot] Thymeleaf 문법 정리

관련글

티스토리툴바