[스프링 부트] (3)
Thymeleaf 사용하는 이유
- JSP와 유사하게 ${}을 별도의 처리 없이 이용가능
- Model에 담긴 객체를 화면에서 JavaScript로 처리하기 편함
- 연산이나 포맷과 관련된 기능을 추가적인 개발없이 지원
- 개발도구를 이용할때 .html 파일로 생성하는데 문제가 없고 별도의 확장자를 이용하지 않음
Thymeleaf 사용 할때 설정파일 변경
spring.thymeleaf.cache=false
//화면 고쳤을때 바로 변경됨
//ex1.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${'Hello World'}"></h1>
</body>
</html>
Thymeleaf 쓸려면 기본적으로 써야 될 항목 => xmlns:th="http://www.thymeleaf.org"
Thymeleaf를 추가하는 이유 -> html과 유사해지고 싶어서
사용방법
1. <h1 th:text="${'Hello World'}"></h1>
2. <h1> [[${'Hello World'}]]</h1>
반복문 처리
th:each = “변수: ${목록}”
//ex2.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li th:each="dto : ${list}">[[${dto}]]</li>
</ul>
</body>
</html>
<li th:each="dto : ${list}">[[${dto}]]</li> => 바로 반복 가능
반복문 상태(status) 객체
=> 상태 객체를 이용하면 순번이나 인덱스 번호, 홀수/짝수 등을 지정할 수 있음
=> index나 count 라는 속성을 사용할 수 있는데 index는 0부터 시작하고, count는 1부터 시작
제어문 처리
1. th:if~unless
<ul>
<li th:each="dto, status : ${list}" th:if="${dto.sno % 5 == 0}">
[[${dto}]]
</li>
</ul>
반복문이 돌동안 sno의 값이 5의 배운인것만 출력하라
<ul>
<li th:each="dto, status : ${list}" >
<span th:if="${dto.sno % 5 == 0}" th:text="${'-----------------' +dto.sno}"></span>
<span th:unless="${dto.sno % 5 == 0}" th:text="${dto.first}"></span>
</li>
</ul>
sno가 5로 나눈 나머지가 0인 경우에는 sno만 출력하고 그렇지 않다면 SampleDTO의 first를 출력하라
2. 삼항연산자
=>2개의 항만으로 처리할 수 있음
<ul>
<li th:each="dto, status : ${list}" th:if="${dto.sno % 5 == 0} ? ${dto.sno}">
[[${dto}]]
</li>
</ul>
Inline 속성
//ex3.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${result}"></h1>
<h1 th:text="${dto}"></h1>
<script th:inline="javascript">
var msg = [[${result}]];
var dto = [[${dto}]];
</script>
</body>
</html>
(SampleController에서 redirectAttributes.addFlasAttribute("result", "success")로 result에는 sucess가 들어가짐)
th:inline ="javascript"로 인하여 별도의 처리가 없음에도 불구하고 문자열에 자동으로 ""가 추가가 됨
th:block
=> 별도의 태그가 필요없음
=>블록에 파라미터를 전달 할 수 있기 때문에 만들어짐
링크 처리를 위한 @{ }
=>서버의 실행 경로에 대한 처리가 좀 더 수월
=>Context-relative
=>URL 쿼리 스트링 처리에 편리
=>{ }를 이용한 Path처리
=>파라미터를 추가하기 위해서 () 추가
LocalDateTime
=>thymeleaf-extras-java8time 라이브러리 사용
<ul>
<li th:each="dto : ${list}" >
[[${dto.sno}]] --- [[${#temporals.format(dto.regTime, 'yyyy/MM/dd')}]]
</li>
</ul>#temporals라는 객체를 이용하여 format()으로 처리
Thymeleaf 레이아웃
1. include 사용방식
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Fragment Test</h1>
<h1>Layout 1 - 1</h1>
<div th:replace="~{/fragments/fragment1 :: part1}" ></div>
<h1>Layout 1 - 2</h1>
<div th:insert="~{/fragments/fragment1 :: part2}" ></div>
<h1>Layout 1 - 3</h1>
<th:block th:replace="~{/fragments/fragment1 :: part3}" ></th:block>
</body>
</html>
th:insert
=> 기존 내용의 바깥쪽 태그는 그대로 유지하면서 추가되는 방식
th:replace
=> 기존의 내용을 완전히 대체
=> '::' 뒤에 fragment의 이름을 지정하거나 css의 '#id' 와 같은 선택자를 이용할 수 있음
=> '::' 이하 생략 -> 해당 파일 전체 내용을 가져 올 수 있음
2. 파라미터 방식의 처리
특정한 태그를 파라미터처럼 전달해서 다른 th:fragment에서 사용
target부분에는 first와 second라는 파라미터를 받을 수 있도록 구성