Thymeleaf의 목표

 

Thymeleaf의 주 목표는 템플릿을 만들 때 유지관리가 쉽도록 하는 것이다. 이를 위해 디자인 프로토타입으로 사용되는 템플릿에 영향을 미치지 않는 방식인 Natural Templates을 기반으로 한다. Natural Templates은  기존 HTML 코드와 구조를 변경하지 않고 덧붙이는 방식이다.

 

 

Thymeleaf의 장점
  • 코드를 변경하지 않기 때문에 디자인 팀과 개발 팀 간의 협업이 쉽다.
  • JSP와 달리 Servlet Code로 변환되지 않기 때문에 비즈니스 로직과 분리되어 View에 집중할 수 있다.
  • 서버 상에서 동작하지 않기 때문에 서버없이 화면을 확인 할 수 잇다. 그래서 더미 데이터를 넣고 화면 디자인 및 테스트에 용이하다.

 

Thymeleaf Namespace

 

Thymeleaf의 th 속성을 사용하기 위해 html 파일 위에 namespace를 선언한다.

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

 

 

 

Thymeleaf 문법

 

th:text

  • Thymeleaf는 ${ } 표현식을 사용하여 자바 컨트롤러에서 전달받은 데이터에 접근할 수 있다.
  • text 속성은 일반적인 텍스트 형식으로 데이터를 화면에 출력한다.
<div th:text="${data}"></div>

<!--이렇게도 사용 가능하다!-->
[[${data}]]

 

 

th:if , th:unless

  • th:if 는 if문과 동일하고, th:unless는 else 문과 같다고 볼 수 있다.
<span th:if="${userNum} == 1"></span>
<span th:unless="${userNum} == 2"></span>

 

 

th:switch , th:case

  • th:switch , th:case는 switch case 문과 동일하다.
<th:block th:switch = "${num}">
	<span th:case = "1"> 처리1 </span>
    <span th:case = "2"> 처리2 </span>
</th:block>

//switch case문으로 제어할 태그를 th:block으로 설정하고 그 안에 코드를 작성한다.
//num라는 변수의 값이 1이거나 2일때 동작한다.

 

 

th:each

  • 컬렉션 객체를 반복 처리한다. 자바의 forEach와 유사한 기능이다.
<li th:each = "article : ${articleList}"></li>

 

 

th:fragment

  • <head> 태그에 해당 속성을 사용해서 fragment의 이름을 지정한다.
  • fragment는 다른 HTML에서 include 또는 replace 속성을 사용해서 적용할 수 있다.
<footer th:fragment="footer"><p>바닥글</p></footer>

 

 

th:block

  • 영역을 지정해서 명령을 주는 기능이다. 해당 기능은 동적인 처리가 필요할 때 사용된다.
<th:block th:fragment="footer">

 

 

th:replace

  • JSP의 <include> 태그와 유사한 속성이다.
  • th:fragment을 통해 설정한 이름을 찾아 해당 코드로 치환한다.
<div th:replace="~{/common/footer :: footer}"></div>

 

 

th:href

  • <a> 태그의 href 속성과 동일한 기능을 수행한다
  • 웹 애플리케이션을 구분하는 Context Path를 포함한다.
<a th:href="@{/boardlist?id=${id}}">go</a>
<a th:href="@{/boardlist(id=${id})}>go</a>

//참고!!
★ 특정 url로 이동 : <a th:href="@{https://localhost/detail}">상세보기</a>
★ 현재 서버 내에서 이동 : <a th:href="@{/board/list}">게시글 목록</a>
★ 파라미터를 넘길 시 : <a th:href="@{/board/view(id=${board.id})}">상세보기</a>
★ 파라미터를 여러개 넘길 시 : <a th:href="@{/board/view(id=${board.id},writer=${board.writer})}">싱세보기</a>
★ PathVariable 사용 시 : <a th:href="@{/board/view/{id}(id=${board.id})}">상세보기</a>

 

 

th:action

  • <form> 태그 사용시 해당 경로로 요청을 보낼 때 사용한다.
<form th:action="@{/search}" method="get">

 

 

th:object

  • 컬렉션 객체 데이터를 th:object에 설정해둔 객체로 받아들인다.
  • 즉, 컨트롤러와 뷰(화면) 사이의 DTO 클래스의 객체이다.
<form th:action="@{/reply}" method="post" name="reFrm" th:object="${data}">

 

 

th:field

  • 위의 th:object 속성을 이용하면, th:field를 이용해서 HTML 태그에 멤버 변수를 매핑할 수 있다.
  • th:field을 이용한 사용자 입력 필드 (input, textarea 등) 는 id, name, value 속성 값이 자동으로 매핑된다.
  • 그러므로 각 속성을 따로 지정할 필요가 없다. th:field는 ${ } 표현식이 아닌, *{ } 표현식을 사용한다.
  • th:object와 th:field는 컨트롤러에서 특정 클래스의 객체를 전달받은 경우에만 사용 가능하다.
<input type="text" th:field="*{name}">

 

 

 

th:checked

  • checkbox의 경우, th:checked 속성을 이용해서 조건이 "true"에 해당하면, checked 속성을 적용한다.
<input type="checkbox" name="food" value="coffee" th:checked="true">커피
<input type="checkbox" name="food" value="cookie" th:checked="false">쿠키

 

 

th:inline="javascript"

  • <script> 태그에 th:inline 속성을 javascript로 지정한 후 자바스크립트를 사용할 수 있다.
<script th:inline="javascript">
    var jikwonno = [[${jikwon.jikwonno}]];
    var jikwonname = [[${jikwon.jikwonname}]];
</script>

 

 

 

th:with="${ }"

  • 변수 형태의 값을 재 정의하는 속성이다. 즉, th:with를 이용하여 새로운 변수 값을 생성할 수 있다.
<div th:with="userId=${number}" th:text="${userId}">

 

 

 

th:value="${ }"

  • input의 value에 값을 삽입할 때 사용한다. 여러 개의 값을 넣을 땐 + 기호를 사용한다.
<input type="text" id="userId" th:value="${userId} + 의 이름 ${userName}"/>

 

 

 

#numbers.sequest(start, end, step)

  • 타임리프는 #numbers 라는 숫자 포맷 메소드를 지원한다. #numbers에는 다양한 메소드가 있는데 가장 많이 사용하는 것이 #numbers.sequence 이다. #numbers.sequence 메소드는 start, end, step을 이용하여 원하는 범위에 대해 시퀀스를 생성해준다.

 

 

Thymeleaf 문법 중 변수 및 메세지 표현 방식의 이해

 

표현 설명 예제
@{ ... } URL 링크 표현식 th:href="@{/css/bootstrap.min.css}"
th:href="@{/{itemId}/edit(itemId=${item.id})}"
| ... | literal 대체 th:text="|Hello ${user.name} ! |"
${ ... } 변수 th:text = ${user.name}
*{ ... } 선택 변수 <tr th:object = "${items}">
    <td th:text = "*{price}">5000</td>
</tr>
#{ ... } 메시지
properties 같은 외부 자원에서 코드에 해당하는 문자열 get.		 th:text="#{member.name}"

 

 

 

 

참조 : https://cafe.daum.net/flowlife

저작자표시 비영리 변경금지 (새창열림)

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

Entity 와 DTO의 개념과 차이점  (9) 2024.11.03
[Thymeleaf] 3. 사용 예시 (기본, 레이아웃)  (7) 2024.11.01
[Thymeleaf] 1. Thymeleaf 의 특징과 설정 방법  (5) 2024.10.29
Spring Annotaion 알아보기  (6) 2024.10.23
Ant, Maven, Gradle 의 차이  (5) 2024.10.20

티스토리툴바