Thymeleaf 라이브러리

타임리프(Thymeleaf) 라이브러리는 템플릿을 이용해서 HTML 페이지를 편리하게 만들 수 있도록 도와줍니다. Spring Initializer 웹사이트에서 ‘Thymeleaf’ 항목을 선택하고 프로젝트를 생성하면 됩니다.

SampleController.kt

@Controller
class SampleController {

    @GetMapping("/hello")
    fun hello(model: Model) {
        model.addAttribute("message", "Hello, SnowDeer.")
    }
}

hello.html

resources/templates/ 디렉토리 아래에 hello.html 파일을 생성합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<h2>Thymeleaf Template Sample</h2>
</body>
</html>

그런 다음 웹브라우저에서 http://localhost:8080/hello 페이지에 접속하면 방금 생성한 hello.html 페이지가 뜨는 것을 확인할 수 있습니다.

그리고 위 코드를 아래처럼 수정을 하면,

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<h2 th:text="${message}">Thymeleaf Template Sample</h2>
</body>
</html>

SampleController에서 model.addAttribute 메소드로 넘긴 파라메터가 잘 전송된 것을 확인할 수 있습니다.

utext 명령어

utext 명령어는 HTML 문자열을 출력하는 명령어입니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<h2 th:text="${message}">Thymeleaf Template Sample</h2>

th:text
<div th:text='${"<h3>" + user.id + "</h3>"}'/>

<br>

th:utext
<div th:utext='${"<h3>" + user.id + "</h3>"}'/>

</body>
</html>

를 실행해보면

th:text
<h3>snowdeer</h3>

th:utext
snowdeer

와 같이 출력되는 것을 확인할 수 있습니다.

리스트 출력하기

리스트를 위한 반복문은 th:each 명령어를 이용해서 처리할 수 있습니다.

@Controller
class SampleController {

    @GetMapping("/userList")
    fun userList(model: Model) {

        val list = ArrayList<UserVO>()
        for (i in 0 until 10) {
            val user = UserVO(uno = i.toLong(), id = "snowdeer$i", password = "1234", name = "Seo $i")

            list.add(user)
        }

        model.addAttribute("list", list)
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<table border="1">
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>RegDate</td>
    </tr>

    <tr th:each="user : ${list}">
        <td th:text="${user.id}"/>
        <td th:text="${user.name}"/>
        <td th:text="${#dates.format(user.regDate, 'yyyy-MM-dd hh-mm-ss')}"/>
    </tr>

</table>

</body>
</html>

그리고 th:each에서 추가로 반복 상태에 대한 변수 값을 아래의 예제처럼 사용할 수도 있습니다.

    <tr th:each="user, iter : ${list}">
        <td th:text="${iter.index}"/>
        <td th:text="${iter.size}"/>
        <td th:text="${user.id}"/>
        <td th:text="${user.name}"/>
        <td th:text="${#dates.format(user.regDate, 'yyyy-MM-dd hh-mm-ss')}"/>
    </tr>

그 외에도 count, odd, even, first, last 등의 값을 사용할 수도 있습니다.

특정 범위내 유효한 변수

특정 범위내에 유효한 변수는 th:with를 이용해서 구현할 수 있습니다. 예를 들면 다음과 같습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<table border="1" th:with="target='snowdeer5'">
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>RegDate</td>
    </tr>

    <tr th:each="user : ${list}">
        <td th:text="${user.id == target ? 'SNOWDEER': user.id}"/>
        <td th:text="${user.name}"/>
        <td th:text="${#dates.format(user.regDate, 'yyyy-MM-dd hh-mm-ss')}"/>
    </tr>

</table>

</body>
</html>

if, ~unless 구문

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<table border="1" th:with="target='snowdeer5'">
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>RegDate</td>
    </tr>

    <tr th:each="user : ${list}">
        <td th:text="${user.id == target ? 'SNOWDEER': user.id}"/>
         <td th:if="${user.name}">
            <a href="/profile" th:if="${user.name=='Seo 3'}">Seo 3 Profile</a>
            <p th:unless="${user.name=='Seo 3'}">Nothing</p>
        </td>
        <td th:text="${#dates.format(user.regDate, 'yyyy-MM-dd hh-mm-ss')}"/>
    </tr>

</table>

</body>
</html>

자바스크립트에 연결하기

@Controller
class SampleController {

    @GetMapping("/useJavascript")
    fun useJavascript(model: Model) {
        val text = "Hello"

        model.addAttribute("text", text)

    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<script th:inline="javascript">
    var text = [[${text}]]
    alert(text)
</script>

</body>
</html>

snowdeer's Code Holic

Thymeleaf Sample 예제