Thymeleaf Template Engine

이광훈·2023년 6월 12일

Spring Template-Engine Thymeleaf html

✅ Thymeleaf Template Engine

🌐 Template Engine

👉 라이브러리의 일종으로, HTML의 내용물을 동적으로 변경하는데 주로 사용됨

→ 채워져야 하는 부분이 존재하는 HTML을 템플릿으로 활용, 채워야할 데이터를 제공받으면 그 부분에 데이터를 기반으로 채워넣은 뒤, 완성된 HTML을 돌려줌

단순한 HTML이 아닌 Model의 변화에 따라 나타나는 모습이 다르게 보이도록 해줌

🌐 Thymeleaf

👉 서버 사이드 Java 템플릿 엔진으로, HTML, XML, JavaScript, CSS 등의 마크업 문서를 생성하고 렌더링하는 데 사용됨

📌 일반적으로 Spring 프레임워크와 통합되어 많이 사용되며, Spring MVC와 함께 주로 사용되는 템플릿 엔진 중 하나

1. Thymeleaf 설정하기

🚧 start.spring.io를 이용한다면 Dependencies에서 Thymeleaf를 추가

🚧 Gradle과 Maven에 따라 ThymeleafViewResolver를 추가

Gradle - build.gradle

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

Maven - pom.xml

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

👉 위 설정 추가 후 빌드하면 Thymeleaf를 이용할 수 있음

2. Thymeleaf 문법

대부분의 html 속성을 th:xxx로 변경할 수 있다.

표현	설명	예제
@{ ... }	URL 링크 표현식	th:href="@{/css/bootstrap.min.css}" th:href="@{/{itemId}/edit(itemId=${item.id})}"
\| ... \|	리터럴 대체	th:text="\|Hi ${user.name}!\|" ( = th:text="'Hi '+${user.name}+'!'" )
${ ... }	변수	th:text=${user.name}
[[${ … }]]	변수 직접 출력	<tr th:each="item: ${items}"> <td th:text="${item.price}">100</td> </tr>
*{ ... }	선택 변수	<tr th:object="${items}"> <td th:text="*{price}">100</td> </tr>
#{ ... }	properties같은 외부 자원에서 코드에 해당하는 문자열 get	th:text="#{member.register}"

3. Thymeleaf 연습

1) Today's Hits

@Controller
public class MvcController {
	private int hitCount = 0;
    
    @RequestMapping("/hits")
    public String hits(Model model) {
    	model.addAttribute("hits", ++hitCount);
        return "hits";
    }
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Hits</title>
</head>
<body>
	<!-- 새로고침할 때마다 hits가 증가한다. -->
  <p>Today's Hits: [[${hits}]]</p>
</body>
</html>

🚧 결과

2) Lotto

@Controller
public class MvcController {
	@RequestMapping("/lotto")
    public String lotto(Model model) {
    	List<Integer> listOfNums = new ArrayList<>();
        // 랜덤 받아서 6번 출력 → listOfNums에 담기
        for (int i = 0; i < 6; i++) {
        	listOfNums.add((int)(Math.random()*46)); // 정수로 0<random<46 범위를 정함
        }
        model.addAttribute("listOfNums",listOfNums);
        return "lotto";
    }
}

<!-- lotto.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lotto</title>
</head>
<body>
    <span th:each="item: ${listOfNums}">[[${item}]] - </span>
    <div>
        <a href="/hits">뒤로가기</a>
        <a href="/lotto">다시하기</a>
    </div>
</body>
</html>

🚧 결과

(범위를 0~99로 지정했을때 이미지)

3) History of Lotto

@Controller
public class MvcController {
	// listOfLotto 문자열 배열 생성
    private List<String> listOfLotto = new ArrayList<>();
    
    @RequestMapping("/lotto")
    	public String lotto(Model model) {
        // lotto 불러올때마다 listOfNums 초기화
        List<Integer> listOfNums = new ArrayList<>();
        for (int i = 0; i < 6; i++) {
        	listOfNums.add((int)(Math.random()*46));
        }
        listOfLotto.add(listOfNums.toString());
        model.addAttribute("listOfNums", listOfNums);
        return "lotto";
    }
    
    @RequestMapping("/history")
    public String history(Model model) {
    	// 우선 listOfLotto가 존재하는지 체크
        boolean isHistory;
        if (!listOfLotto.isEmpty()) isHistory = true;
        else isHistory = false;
        // 그후 속성 넘겨주기
        model.addAttribute("listOfLotto", listOfLotto);
        model.addAttribute("isHistory", isHistory);
        return "history";
    }
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>History</title>
</head>
<body>
  <div>
    <h2>Lotto List</h2>
		<!-- isHistory bool 값에 따라 출력 결과가 다르다. -->
    <div th:if="${isHistory}">
    <p th:each="item: ${listOfLotto}">[[${item}]]</p>
    </div>
    <div th:unless="${isHistory}"><p>아직 기록이 없습니다.</p></div>
  </div>
    <a href="/hits">돌아가기</a>
</body>
</html>