티스토리 뷰

백엔드/ThymeLeaf

[Thymeleaf] 자체 태그 (th:block , th:inline, th:fragment)

거북이의 기술블로그 2024. 10. 17. 22:32
1. th:block
2. th:inline
3. th:fragment

 

th:block

  • <div> 태그와 같이 블록단위로 묶는 역할
  • th:block와 th:each를 활용하여, 반복적으로 작성이 가능하다
  • 또는 th:if를 활용하여, 조건부로도 사용이 가능하다
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thymeleaf Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    
    <th:block th:if="${user != null}">
      <p> User : <span th:text="${user.username}"></span></p>
    </th:block>
    
    <th:block th:each="user : ${users}">
      <p> User : <span th:text="${user.username}"></span></p>
    </th:block>
  
      
  </body>
</html>

 

 

th:inline

  • javascript, css ,text 을 이스케이프 처리가 되어, 안전하게 렌더링을 진행한다
  • th:inline="javascript" 의 경우 변수명과 값에 "(큰따옴표) , json 자동 변환 등을 지원한다
    • th:inline 이 없을경우, (출력결과)
      • var username = userA
      • var user =Controller.User(username=userA, customColor=blue)
  • 안전한 타임리프 렌더링을 이용하기 위해서 사용된다
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thymeleaf Example</title>
    <link rel="stylesheet" href="styles.css" />
    
    <style th:inline="css">
      .test{
        color="red"; /*[[${user.customColor}]]*/
      }
    </style>
    
    
  </head>
  <body>
  
    <script th:inline="javascript">
      var username = [[${user.username}]]; //"userA" 출력 
      // javascript 내추럴 템플릿
      var username2 = /*[[${user.username}]]*/ "test user";
      
      var user = [[${user}]] // {"username": "userA", "customColor" : "blue"} 출력
    </script>
  	
    <p th:inline="text">welcome! [[${user.username}]]</p>
  </body>
</html>

 

 

th:fragment

  • 공통 처리를 위한 기능
  • html 문서중 공통으로 처리할 부분을 따로 저장하여 불러서 사용하는 용도
  • insert 와 replace 를 이용하여, 삽입하거나 대체할 수 있다 (<div> 안에 삽입하거나, <div> 를 대체하여 넣거나)
  • param 값을 전달하여 표현할 수 있다
파일경로 : /templates/fragment/fragmentTest.html

<body>
        <header th:fragment="fragmentTest">
                헤더 자리.
        </header>

         <header th:fragment="fragmentParamTest (param1, param2)">
                 <p> 파라미터 </p>
                <p th:text="${param1}"></p>
                <p th:text="${param2}"></p>
        </header>
</body>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thymeleaf Example</title>
    <link rel="stylesheet" href="styles.css" />
    
  </head>
  <body>
  
    <div th:insert="~{fragment/fragmentTest :: fragmentTest}"></div>
    <!-- 출력결과
    <div>
        <header>
            헤더자리
        </header>
    </div>
    -->
    
    
    <div th:replace="~{fragment/fragmentTest :: fragmentTest}"></div>
    <!-- 출력결과
        <header>
            헤더자리
        </header>
    -->
    
    
    <div th:replace="~{fragment/fragmentTest :: fragmentParamTest ('data1', 'data2')}"></div>
    <!-- 출력결과
        <header>
            파라미터
            data1
            data2
        </header>
    -->
    
    
  </body>
</html>

 

'백엔드 > ThymeLeaf' 카테고리의 다른 글

[Thymeleaf] th:field, th:object  (0) 2024.10.18
[Thymeleaf] 템플릿 레이아웃  (0) 2024.10.17
[Thymeleaf] 주석  (1) 2024.10.17
[Thymeleaf] 속성, 반복, 조건 (th:*, th:each,th:if)  (0) 2024.10.17
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함