728x90
반응형
Thymeleaf
'템플릿 엔진'의 일종으로 HTML에 속성을 추가해 페이지에 값을 추가하거나 처리 할 수 있다.
Thymeleaf를 사용하는 이유?
1. JSP와 유사하게 ${}을 별도의 처리 없이 이용할 수 있다.
2. Model에 담긴 객체를 화면에서 Javascript로 처리하기 편하다.
3. 연산이나 포맷 기능을 추가적인 개발 없이 지원한다.
기본적인 사용방법
기존의 속성 앞에 'th:'를 붙여주고 값을 지정해준다.
JSP와 달리 별도의 태그를 이용하지 않아도 되며 Thymeleaf는 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'}"></h1>
</body>
</html>
|
cs |
일반적으로 JSP에서 foreach문으로 리스트를 돌리는 것과 다르게
li 태그 내에 th:each라는 속성으로 값을 넘겨주면 편하게 처리가 가능하다.
|
<!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>
|
cs |
반복문의 state 객체
소스를 보면 state가 추가된 것을 볼 수 있고, 변수의 이름은 다른 이름을 이용하는 것도 가능하다.
|
@GetMapping({"/ex2", "/exLink"})
public void exModel(Model model) {
List<SampleDTO> list = IntStream.rangeClosed(1,20).asLongStream().
mapToObj(i->{
SampleDTO dto = SampleDTO.builder()
.sno(i)
.first("First.."+i)
.last("Last.."+i)
.regTime(LocalDateTime.now())
.build();
return dto;
}).collect(Collectors.toList());
model.addAttribute("list", list);
}
|
cs |
|
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.target {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li th:each="dto, state: ${list}">
[[${state.index}]] --- [[${dto}]]
</li>
</ul>
</body>
</html>
|
cs |
제어문
Thymeleaf의 제어문 처리는 th:if ~ unless 등을 이용할 수 있고, 삼항연산자 스타일을 사용할 수 있다.
|
@GetMapping({"/ex2"})
public void exModel(Model model) {
List<SampleDTO> list = IntStream.rangeClosed(1,20).asLongStream().
mapToObj(i->{
SampleDTO dto = SampleDTO.builder()
.sno(i)
.first("First.."+i)
.last("Last.."+i)
.regTime(LocalDateTime.now())
.build();
return dto;
}).collect(Collectors.toList());
model.addAttribute("list", list);
}
|
cs |
- 'th:if' 를 사용한 방법
|
<!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, state: ${list}" th:if="${dto.sno % 5 == 0}">
[[${dto}]]
</li>
</ul>
</body>
</html>
|
cs |
- 삼항연산자를 사용한 방법
|
<!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, state: ${list}">
<li th:text="${dto.sno % 5 == 0}?${dto.sno}:${dto.first}"></li>
</li>
</ul>
</body>
</html>
|
cs |
이런 방식을 이용하면 특정 상황에서만 작용하는 CSS의 클래스를 지정하는 작업도 편하게 할 수 있다.
|
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.target {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li th:each="dto, state: ${list}" th:class="${dto.sno % 5 == 0}?'target'" th:text="${dto}">
</li>>
</ul>
</body>
</html>
|
cs |
728x90
반응형
'스프링' 카테고리의 다른 글
| [Spring Boot] 동적 쿼리 처리를 위해 Querydsl 알아보기 (0) | 2023.02.13 |
|---|---|
| [Spring Boot] Thymeleaf를 활용해보자(2) (0) | 2023.01.12 |
| [Spring] @Query 어노테이션에 대해 알아보자 (0) | 2023.01.09 |
| [Spring] 쿼리 메서드(Query Methods)에 대해 알아보자 (0) | 2023.01.09 |
| [Spring] Pageable 인터페이스 사용해보기 (0) | 2023.01.08 |