타임리프
Thymeleaf is a modern server-side Java template engine.
The main goal of Thymeleaf is to provide highly-maintainable way of creating templates.
it builds on the concept of Natural Templates.
타임리프는 순수 HTML로 사용할 수 있으면서 서버 사이드 렌더링(SSR)으로서 뷰 템플릿의 역할도 하는 네츄럴 템플릿이다.
스프링과 자연스럽게 통합되어 스프링의 다양한 기능을 편리하게 사용할 수 있는 장점이 있다.
기본 표현식
- 타임리프는 기본적으로 HTML 태그의 속성에 기능을 정의해서 동작한다.
- 뷰 템플릿으로 실행하지 않을 때는 기본 HTML 태그로 동작하기 때문에 네츄럴 템플릿이라고 한다.
텍스트
<li>th:text 사용 <span th:text="${data}"></span></li>
<li>컨텐츠 안에서 직접 출력 = [[${data}]]</li>
HTML 엔티티
- HTML 태그를 순수 문자 용도로 사용하도록 변경(이스케이프)하는 방법
- th:text, [[...]] 의 경우 기본적으로 이스케이프를 적용
- 이스케이프를 적용하지 않으려면 th:utext, [(...)] 로 사용 (HTML 태그로 동작함)
- 이스케이프를 적용하지 않을 경우 HTML 렌더링 오류 위험
변수 표현
- 스프링이 제공하는 변수 표현식 SpringEL
<li> user 객체 프로퍼티 접근 <span th:text="${user.username}"></span></li>
<li> List 접근 <span th:text="${users[0].username}"></span></li>
<li> Map 접근 <span th:text="${userMap['userA'].username}"></span></li>- 지역 변수 선언
<!-- 변수(user)는 선언한 태그 내에서만 사용 가능 -->
<div th:with="user=${users[0]}">
<p><span th:text="${user.username}"></span></p>
</div>
유틸리티 객체
- 문자, 숫자, 날짜, URI, 객체, 배열등을 편리하게 다루는 다양한 유틸리티 객체들 (thymeleaf.org 참고)
<!-- LocalDateTime Format Example -->
<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
URL 링크
<!-- path variable + query parameter -->
<li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}"></a></li>
리터럴
- 문자 리터럴은 작은 따옴표(' ')로 감싸거나 리터럴 대체 문법으로 처리를 해야 된다.
<li>따옴표 사용<span th:text="'hello ' + ${data}"></span></li>
<li>리터럴 대체<span th:text="|hello ${data}|"></span></li>
Checked
<!-- HTML에서는 checked 속성이 false여도 체크가 되는데 타임리프는 false일 경우 checked 옵션이 사라짐 -->
<input type="checkbox" name="active" th:checked="false" />
반복문
- th:each 는 List 뿐만 아니라 배열, Map, java.util.Iterable , java.util.Enumeration 을 구현한 모든 객체를 반복에 사용 가능
- 두번째 파라미터를 설정해서 상태 확인 가능 (생략 시 변수명 + 'Stat', 예제에서는 userStat)
- index, count(1부터 시작 index), size, current (현재 객체) 등 다양한 반복 상태 나타내는 기능
<!-- userStat 생략 가능 -->
<tr th:each="user, userStat : ${users}">
<td th:text="${user.username}">username</td>
<td th:text="${user.age}">age</td>
</tr>
조건문
- th:if, th:unless
- 조건 충족하지 않을 경우 해당 태그 자체가 사라짐
- 스위치문 th:switch, th:case, th:*(default)
블록
- HTML이 아닌 유일한 타임리프 자체 태그
- HTML 태그 사용하기 애매한 경우에 사용, th:block은 렌더링시 제거
<th:block th:each="user : ${users}"></th:block>
자바스크립트 인라인
- 자바스크립트에서 타임리프를 편리하게 사용할 수 있게 지원해주는 자바스크립트 인라인 기능
- 객체를 JSON으로 자동 변환
<script th:inline="javascript">
<!-- 렌더링시 주석이 제거되면서 [[${user.username}]] 출력 -->
var username2 = /*[[${user.username}]]*/ "test username";
<!-- 자바스크립트 인라인 each문 -->
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>
템플릿 조각
<footer th:fragment="copy">
footer content
</footer>
<footer th:fragment="copyParam (param1, param2)">
<p th:text="${param1}"></p>
<p th:text="${param2}"></p>
</footer><!-- ~{template/fragment/footer :: copy} = ~{'파일경로' :: 'fragment name'} -->
<!-- insert 사용 시 현재 태그 내부에 생성 -->
<div th:insert="~{template/fragment/footer :: copy}"></div>
<!-- replace 사용 시 현재 태그를 대체 -->
<div th:replace="~{template/fragment/footer :: copy}"></div>
<!-- 파라미터 넘기기 -->
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터 2')}"></div>
템플릿 레이아웃
- 공통으로 사용하는 css , javascript 같은 정보들이 있는데, 이러한 공통 정보들을 한 곳에 모아두고, 공통으로 사용하지만, 각 페이지마다 필요한 정보를 더 추가해서 사용하고 싶은 경우 템플릿 레이아웃 적용
- html 자체를 레이아웃 하는 것도 가능
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">레이아웃 타이틀</title>
<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!-- 추가 -->
<th:block th:replace="${links}" />
</head><!-- ::title 은 현재 페이지의 title 태그들을 전달한다.-->
<!-- ::link 는 현재 페이지의 link 태그들을 전달한다.-->
<head th:replace="template/layout/base :: common_header(~{::title},~{::link})">
<title>메인 타이틀</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
폼 기능
- th:object : 커맨드 객체를 지정
- *{...} : 선택 변수 식, th:object 에서 선택한 객체에 접근한다.
- th:field : HTML 태그의 id , name , value 속성을 자동으로 처리
- th:field는 정상 상황에는 모델 객체의 값을 사용하지만, 오류가 발생하면 FieldError 에서 보관한 값을 사용해서 값을 출력
체크 박스
- HTML 체크 박스는 체크가 안되면 서버로 값 자체를 보내지 않기 때문에 경우에 따라 사용자가 체크되어 있던 값을 해제한 건지 판단하기가 어려움
- 스프링 MVC는 이를 위해 _open 이라는 히든 필드를 추가로 하나 만들어서 체크 해제를 인식할 수 있다. (히든 필드는 항상 전송)
- 따라서 체크를 해제하면 open 은 전송되지 않고 _open 이 전송되는데, 이 경우 체크를 해제했다고 판단할 수 있다.
- 타임리프를 사용하면 히든 필드(_open)를 자동으로 생성
<input type="checkbox" id="open" name="open" class="form-check-input">
<!-- 히든 필드 추가 -->
<input type="hidden" name="_open" value="on"/><!-- 타임리프는 체크박스의 히든 필드도 자동으로 해결 -->
<input type="checkbox" id="open" th:field="${item.open}" class="form-check-input">
멀티 박스
- @ModelAttribute를 컨트롤러에 있는 별도의 메서드에 적용하면 해당 컨트롤러를 요청할 때 메서드에서 반환한 값이 자동으로 model에 담기게 된다.
- 멀티 체크박스를 th:each로 생성 시 id를 임의로 item1, item2, item3 .. 이런식으로 생성
<!-- multi checkbox -->
<div>
<div th:each="item : ${items}" class="form-check form-check-inline">
<input type="checkbox" th:field="*{items}" th:value="${item.key}" class="form-check-input">
<label th:for="${#ids.prev('items')}" th:text="${item.value}" class="form-check-label">서울</label>
[참고] 인프런 김영한님 강의를 공부한 내용입니다.
'Spring' 카테고리의 다른 글
| [스프링 MVC2] 애노테이션 검증 (Bean Validation) (0) | 2022.06.15 |
|---|---|
| [스프링 MVC2] 메시지, 국제화 (0) | 2022.06.15 |
| [스프링 MVC1] 서블릿, MVC 패턴 (2/2) (0) | 2022.06.13 |
| [스프링 MVC1] 서블릿(Servlet), MVC 패턴 (1/2) (0) | 2022.06.13 |
| [Spring] 스프링 핵심 개념 (2/2) (0) | 2022.06.13 |