[Thymeleaf]타임리프 사용법 간단정리

✨ UI/🖤 View Templates

[Thymeleaf]타임리프 사용법 간단정리

뉴이 NUEY 2025. 3. 3. 19:40

타임리프 적용
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
- code
- HTML에 타임리프를 연결한다. HTML을 활용해서 사용하기 때문에 natural template이라고 한다.
- th 라는 약어로 타임리프를 사용할 수 있게 된다.

사용법1 : item이란 이름으로 로직에서 List를 반환했을 경우(json으로 반환될 경우)

화면

code

<!DOCTYPE HTML>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
</head>

<body>
    <div class="container" style="max-width: 600px">
        <div class="py-5 text-center">
            <h2>상품 목록</h2>
        </div>
        <div class="row">
            <div class="col">
                <button class="btn btn-primary float-end" th:onclick="|location.href='@{/basic/items/add}'|" type="button">상품 등록</button>
            </div>
        </div>
        <hr class="my-4">
        <div>
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>상품명</th>
                        <th>가격</th>
                        <th>수량</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="item : ${items}">
                        <td><a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원 id</a></td> 
                        <td><a href="item.html" th:href="@{/basic/items/{itemName}(itemName=${item.itemName})}"th:text="${item.itemName}">상품명</a></td>
                        <td th:text="${item.price}">10000</td>
                        <td th:text="${item.quantity}">10</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div> <!-- /container -->
</body>

</html>

<tr th:each="item : ${items}">
→ foreach문과 같다. items에 있는 걸 item이란 이름으로 하나씩 꺼내온다.
th:text="${item.id}"
→ 텍스트를 html에 넣었어도 th에서 지정한 텍스트로 치환된다.
<a href="item.html" th:href="@{/basic/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원 id</a>
→ 🌞 href가 쓰였지만, th:href 타임리프로 치환된다.

→ 링크 표현식 : href="@{ }" 식으로 경로를 적을 수 있다.

→ {itemId}(itemId=${item.id}) 처럼 안에 값을 지정해 적을 수 있다.
🌞 리터럴 대체 |....| 문법
- 전에는 <span th:text="'welcome' + ${user.name} + '!'">으로 적어야 했었다.
- 지금은 <span th:text="|welcome ${user.name}!"> 으로 적을 수 있다.

사용법2 : item이란 이름으로 (클래스로 만든) 객체를 반환 받았을 경우. (json으로 들어온다.)

화면

code

<!DOCTYPE HTML>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="py-5 text-center">
            <h2>상품 상세</h2>
        </div>
        <div>
            <label for="itemId">상품 ID</label>
            <input type="text" id="itemId" name="itemId" class="form-control" value="1" th:value=${item.id} readonly>
        </div>
        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value=${item.itemName} readonly>
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" id="price" name="price" class="form-control" value="10000" th:value=${item.price} readonly>
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value=${item.quantity} readonly>
        </div>
        <hr class="my-4">
        <div class="row">
            <div class="col">
                <button class="w-100 btn btn-primary btn-lg" 
                onclick="location.href='editForm.html'" 
                th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
                type="button">상품 수정</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                onclick="location.href='items.html'"
                th:onclick="|location.href='@{/basic/items}'|"
                    type="button">목록으로</button>
            </div>
        </div>
    </div> <!-- /container -->
</body>

</html>

th:value
→ 말 그대로 value. 값으로 들어간다.

사용법3 : 요청 전달
- 화면
- code
- 스프링은 빈을 먼저 조회하기 때문에 th:action에 적인 이름대로 빈(컨트롤러)를 찾아간다.
- 이 때 add라는 이름으로 method방식만 get/post를 달리해서 이름이 같기에 action주소 생략가능.
사용법4

로직에서 RedirectAttributes로 보냈을 경우에
th:if="${param.status}"
형태로 바로 받을 수 있다.
param이란 이름은 뷰템플릿이 제공한다.

※ 참조 : https://www.inflearn.com/roadmaps/373

저작자표시 비영리 변경금지

'✨ UI > 🖤 View Templates' 카테고리의 다른 글

[Thymeleaf] 타임리프란? (0)	2025.03.07
[JAVA]JSP로 회원관리 웹 애플리케이션 만들기 (0)	2025.02.28
[JSP] jsp란? 기본구성 (0)	2024.12.31