Thymeleaf
-자바에서 제공하는 라이브러리이며, 텍스트, HTML, XML, Javascript, CSS를 생성할 수 있는 템플릿 엔진
-스프링 MVC와의 통합 모듈을 제공하며, 애플리케이션에서 JSP로 만든 기능들을 완전히 대체할 수 있다.
-스프링부트에서는 JSP보다 Thymeleaf사용을 권장한다.
타임리프 문법
공식홈페이지 참조.
타임리프는 최상단에 xmlns:사용명을 명시한다. 생략해도 사용가능하다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
jstl과 문법이 약 80% 유사하다.
- 변수 표현 : ${}
- a링크 : @{}
- fragment expression : ~{} 타일즈 뷰 템플릿을 기본적으로 제공. fragment태그 사용. 이때 ~{}을 사용한다.
- 텍스트 : ''
- 텍스트 결합 : + ${값 + 값}도 되고 ${값}+${값}도 가능.
태그의 속성(property) 앞에 'th:'를 붙이고 사용한다.
타임리프 변수값 출력
th:text="${변수}"
thymeleaf 3버전부터는 [[]]안에 ${}로 바로 출력 가능.
<h1 th:text="${'hello world'}"></h1>
==
<h1>[[${'hello world'}]]</h1>
controller
package com.simple.basic.controller;
import java.util.ArrayList;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import com.simple.basic.command.BuilderVO2;
@Controller
@RequestMapping("/view")
public class ThmeleafController {
@GetMapping("/ex01") //get방식
public String ex01() {
return "view/ex01";
}
@GetMapping("/ex02")
public String ex02(Model model) {
ArrayList<BuilderVO2> list = new ArrayList<>();
for(int i=1;i<=10;i++) {
BuilderVO2 vo=BuilderVO2.builder().name("홍길동"+i).age(i).build();
list.add(vo);
}
//model
model.addAttribute("list",list);
return "view/ex02";
}
}
스프링부트는 template밑이 기본경로.
return "view/ex01";면 template밑에 view라는 폴더 아래 ex01파일
폴더생성하면 templates.view로 이름이 지칭된다. 아이콘 모양도 기본 폴더형식과 다르다.
파일은 html로.
실행은 내장톰캣으로, 화면띄우기는 크롬 url에 localhost:8383/view/ex01로 들어간다.
타임리프 변수선언
th:with : 변수지정
<div th:with="var1=${user.name}"></div>
=>해당 div태그 내에서 var1이란 변수명으로 user.name값을 사용하겠다.
어떤 속성이든 간에, thymeleaf문법을 적용하고 싶으면 속성명 앞에 th:를 붙이면 된다.
가령, th:with으로 지정한 변수를 input태그의 value에서 사용하고 싶으면 th:value="${변수명}"으로 사용하면 된다.
thymeleaf문법에서 조건문
thymeleaf문법에서 elseif문 자체가 없다. if if로 사용한다.
thymeleaf문법에서 else는 unless로 바뀐다.
이때, th:unless=""의 ""안에 th:if=""의 조건과 똑같은 내용을 적는다.
삼항연산자
변수참조할 때 ${변수} 조건 or ${변수 조건} 둘 다 된다.
ex01.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org"><!-- 타임리프 명시적 선언 -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>타임리프 출력과 변수</h3>
<!-- 타임리프 문법을 사용하려면 속성앞에 th를 붙입니다. -->
<h3 th:text="${'hello world'}"></h3>
<h3>[[${'hello world'}]]</h3>
<h3 th:text="${1==1}"></h3>
<h3>[[${1==1}]]</h3>
<h3 th:text="${true and false}"></h3>
<h3>[[${true and false}]]</h3>
<h3>[[${'가' eq '가나다'}]]</h3>
<hr/>
<!-- 변수선언 -->
<div th:with="a=10">[[${a}]]</div>
<div th:with="a=홍길동" th:text="${a}"></div>
<!-- value속성의 사용 -->
<div th:with="a='이순신'">
<input type="text" th:value="${a}"/>
</div>
<hr/>
<!-- if문 elseif문 -->
<div th:with="a=10">
<span th:if="${a==10}">[[${a + '입니다'}]]</span>
<span th:if='${a==20}'>[[${a + '입니다'}]]</span>
</div>
<!-- if else문 : unless는 동일한 조건을 적습니다 -->
<div th:with="a=20">
<span th:if="${a!=20}">20이 아닙니다</span>
<span th:unless="${a!=20}">20입니다</span>
</div>
<!-- 삼항연산자 -->
<div th:with="a=30">
[[${a==30?'30입니다':'30이 아닙니다'}]]<br/>
[[${a}==30?'참':'거짓']]
</div>
</body>
</html>
thymeleaf문법에서 반복문
c:forEach와 달리, th:each로 사용한다.
일반 for문은 없고, 향상된for문만 제공한다.
th:each="user:${users}"
jstl에 varStatus를 사용하려면, th:each="user, a:${users}"로 해서 a를 varStatus로 사용한다.
상태값으로는 index, count, size, current가 있다.
반복문과 조건문을 같이 사용하려면 그냥 태그 안에 둘 다 넣어주면 된다.
ex02.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org">
<!-- 타임리프 명시적 선언 -->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>반복문</h3>
<ul>
<li th:each="vo:${list}">
이름 : [[${vo.name}]] 나이 : [[${vo.age}]]
</li>
</ul>
<hr />
<h3>반복문과 state변수(jstl의 varStatus)</h3>
<!-- each에 두번째 변수를 선언하면 상태값을 담아줍니다.(index, count, size, current 등) -->
<ul>
<li th:each="vo, a: ${list}">
[[${a.count}]]번 -[[${vo.name}]]은 [[${vo.age}]]살
</li>
</ul>
<hr />
<!-- 반복문과 조건문 -->
<h3>반복문과 조건문</h3>
<ul>
<li th:each="vo:${list}" th:if="${vo.age%2==0}">
[[${vo.age+'은(는) 짝수'}]]
</li>
</ul>
<h3>반복문과 조건문2</h3>
<ol>
<li th:each="vo:${list}">
<span th:if="${vo.age%2==0}">짝수</span>
<span th:unless="${vo.age%2==0}">홀수</span>
</li>
</ol>
</body>
</html>
'Spring Boot' 카테고리의 다른 글
| 230213 Spring Boot Thymeleaf 문법 -내장함수 (0) | 2023.02.13 |
|---|---|
| 230213 Spring Boot Thymeleaf 문법 -a태그, block, (0) | 2023.02.13 |
| 230213 Spring Boot Lombok으로 Builder패턴 만들기 (1) | 2023.02.13 |
| 230210 Spring Boot Builder패턴(디자인패턴) (0) | 2023.02.10 |
| 230210 Spring Boot 개별적인 bean 생성, 테스트코드 (0) | 2023.02.10 |
