[Spring Boot] Thymeleaf 사용하기

안녕하세요. 개발자 Jindory입니다.

오늘은 Thymeleaf 사용법에 대해서 알아보고자 합니다.

1. Thymeleaf란

Thymeleaf는 서버측 View Template Engine입니다. 그리고 컨트롤러에서 전달받은 데이터를 이용해 동적인 페이지를 만들 수 있습니다. 태그의 속성으로 thymeleaf 명령어를 사용할 수 있으며 html 파일 내에서 사용이 가능합니다.

2. Thymeleaf 적용

1) Thymeleaf 설정

Thymeleaf는 maven과 gradle에서 각각 아래와 같이 추가하여 설정할 수 있습니다.

// maven
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

// gradle
dependencies {
// Thymeleaf
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

2) Controller와 HTML 코드

[ Controller ]

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class HomeController {
	
	@GetMapping("/home")
	public ModelAndView indexPage() {
		ModelAndView mv = new ModelAndView("/common/introduce");
		
		Map<String,Object> person1 = new HashMap<>();
		person1.put("lastName", "Hong");
		person1.put("firstName", "Gildong");
		person1.put("age",42);
		person1.put("gender", "M");
		person1.put("address","서울시 서대문구");
		person1.put("job",null);
		
		Map<String,Object> person2 = new HashMap<>();
		person2.put("lastName", "Hong");
		person2.put("firstName", "Marsun");
		person2.put("age",19);
		person2.put("gender", "F");
		person2.put("address","서울시 서대문구");
		person2.put("job","학생");
		
		List<String> likes1 = new ArrayList<String>();
		likes1.add("vollyball");
		likes1.add("drama");
		likes1.add("movie");
		likes1.add("jogging");
		likes1.add("fruit");
		
		List<String> likes2 = new ArrayList<String>();
		likes2.add("draw");
		likes2.add("drama");
		likes2.add("movie");
		likes2.add("animal");
		likes2.add("meat");
		
		mv.addObject("person1",person1);
		mv.addObject("person2",person2);
		mv.addObject("likes1",likes1);
		mv.addObject("likes2",likes2);
		
		return mv;
	}
}

[ HTML(Thymeleaf) ]

<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf Introduce</title>
</head>
<body>
	<h1 th:text="${person1.lastName}"></h1>
	<h1 th:text="${person1.firstName}"></h1>
	<h1 th:text="${person1.age}"></h1>
	
	<input type="text" th:value="${person1.address}">
	<br>
	<th:block th:if="${person1.age>20}">성인</th:block>
	<th:block th:unless="${person1.age>20}">미성년자</th:block>
	
	<th:block th:switch="${person1.gender}">
		<div th:case="F">여성</div>
		<div th:case="M">남성</div>
	</th:block>
	
	<th:block th:if="${#strings.isEmpty(person1.job)}">직업 : 무직</th:block>
	<th:block th:unless="${#strings.isEmpty(person1.job)}">직업 : [[${person1.job}]]</th:block>
	
	<th:block th:each="like:${likes1}">
		<li th:text="${like}"></li>
	</th:block>
	
	<hr>
	
	<h1 th:text="${person2.lastName}"></h1>
	<h1 th:text="${person2.firstName}"></h1>
	<h1 th:text="${person2.age}"></h1>
	
	<input type="text" th:value="${person2.address}">
	<br>
	<th:block th:if="${person2.age>20}">성인</th:block>
	<th:block th:unless="${person2.age>20}">미성년자</th:block>
	
	<th:block th:switch="${person2.gender}">
		<div th:case="F">여성</div>
		<div th:case="M">남성</div>
	</th:block>
	
	<th:block th:if="${#strings.isEmpty(person2.job)}">직업 : 무직</th:block>
	<th:block th:unless="${#strings.isEmpty(person2.job)}">직업 : [[${person2.job}]]</th:block>
	
	<th:block th:each="like:${likes2}">	
		<li th:text="${like}"></li>
	</th:block>
</body>
</html>

[ 결과화면 ]

3) Thymeleaf 문법 설명

1> Text값 표현하기

<h1 th:text="'성 : '+${person2.lastName}"></h1>
<h1 th:text="'이름 : '+${person2.firstName}"></h1>
<h1 th:text="|Age : ${person2.age}|"></h1>

<span th:inline="text">직업 : [[${person2.job}]]</span>

th:text="${변수}" / th:inline [[${변수}]]

Controller에서 넘어온 값을 ${변수}값 안에 넣고 th:text안에 표현한다.

문자열과 추가하고자 한다면 문자열+${변수}을 통해 표현하거나, '|'로 전체 표현될 문장을 감싸면 된다.

또한 [[${}]]를 통해 tag사이에 직접 입력할 수도 있다.

2> value로 표현하기

<input type="text" th:value="${person1.address}">

th:value="${변수}"

th:value를 선언하고 그 안에 표현하고자 하는 값을 ${변수}안에 선언하면 된다.

3> 비교 여산자

<th:block th:if="${person1.age>20}">성인</th:block>
<th:block th:unless="${person1.age>20}">미성년자</th:block>

<th:block th:if="${#strings.isEmpty(person1.job)}">직업 : 무직</th:block>
<th:block th:unless="${#strings.isEmpty(person1.job)}">직업 : [[${person1.job}]]</th:block>

th:if="${조건1}" / th:unless="${조건1}"

위와 같이 th:if와 th:unless로 if else 구문을 thymeleaf에서 사용할 수 있다.

th:if와 th:unless에 들어가는 조건이 동일해야한다.(다르게 줄 경우 다른 조건에 따라서 코드가 실행된다.)

문자열의 경우 값이 없거나 null인 경우 #strings.isEmpty(${변수})를 통해 확인 할 수 있다.

4> switch 분기문

<th:block th:switch="${person1.gender}">
    <div th:case="F">여성</div>
    <div th:case="M">남성</div>
</th:block>

th:switch="${변수}" / th:case="조건1" th:case="조건2"

위와 같이 th:switch를 통해 분기에 조건이 될 변수를 ${변수}에 정의하고, th:case로 각 케이스에 대한 값을 넣어 분기처리가 가능하다.

5> 반복문

<th:block th:each="like:${likes1}">
    <li th:text="${like}"></li>
</th:block>

th:each="가변수:${반복변수}"

반복문은 th:each문을 선언하며, 반복할 list 객체를 ${변수}에 입력하고, 반복될 가변수를 앞에 선언하여 가변수를 반복처리한다.

반복문에서는 아래와 같은 status 속성을 사용할 수 있다.

<div th:each="num,status:${#numbers.sequence(1,3)}">
    <p th:text="${'value : ' + num}"></p>
    <p th:text="${'index : ' + status.index}"></p> 
    <p th:text="${'count : ' + status.count}"></p> 
    <p th:text="${'size : ' + status.size}"></p> 
    <p th:text="${'current : ' + status.current}"></p> 
    <p th:text="${'even : ' + status.even}"></p> 
    <p th:text="${'odd : ' + status.odd}"></p> 
    <p th:text="${'first : ' + status.first}"></p> 
    <p th:text="${'last : ' + status.last}"></p> 
</div>

Index는 0부터 시작해서 size-1까지 값을 가지고 있는 속성이다.

count는 1부터 시작해서 size까지 값을 가지고 있는 속성이다.

size는 총 개수

current : 현재 index의 변수를 표현하는 속성이다.

even / odd : 값이 짝수인자 홀수인지에 따라서 true/false를 반환하는 속성이다.

first / last : 반복문의 처음인지 마지막인지에 따라서 true/false를 반환하는 속성이다.

결과는 아래와 같다.

조건문, 분기문, 반복문에 포함된 태그에 th:block가 포함되어 있는것을 알 수 있는데, th:block는 브라우저에서 인식하지 못 하는 태그이다. 조건문은 tag로 인식되어 HTML에 표시되면 안 되기 때문에 th:block를 사용해야만 한다.

이것은 분기문, 반복문에도 동일하게 적용되는 사실이다.

이것으로 Thymeleaf에 대해서 알아봤습니다.

혹시라도 정정할 내용이나 추가적으로 필요하신 정보가 있다면 댓글 남겨주시면 감사하겠습니다.

오늘도 Jindory 블로그에 방문해주셔서 감사합니다.

[ 참고 ]

https://bamdule.tistory.com/216

저작자표시 비영리

'개발 > Spring' 카테고리의 다른 글

[Spring] Spring 초기 데이터베이스 데이터 설정 방법 (0)	2022.07.03
[Spring] 의존성 주입의 정의 및 의존성 주입 3가지 방식 (생성자 주입, 수정자 주입, 필드 주입) (0)	2022.04.30
[Spring] @RequestParam과 @PathVariable의 차이는? (0)	2022.02.20
[Spring] SSE(Server-Sent Events) 이해하기[실시간 서버 데이터 구독] (0)	2022.02.10
[Spring] @Controller와 @RestController 차이 (0)	2022.02.08

1. Thymeleaf란

2. Thymeleaf 적용

'개발 > Spring' 카테고리의 다른 글

티스토리툴바