참치코더의 꿈 메모장

Spring / 자주 쓰는 타임리프(Thymeleaf) 미니 정리 본문

Spring

Spring / 자주 쓰는 타임리프(Thymeleaf) 미니 정리

참치깡 2025. 9. 21. 18:41
728x90

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// 타임리프 사용 선언
// build.gradle 라이브러리 다운로드 다운 및 적용된 가정
 
<html xmlns:th="http://www.thymeleaf.org">
 
// 속성 변경 - th:href
 
th:href="@{/css/bootstrap.min.css}"
 
// 기존에 있던 a태그의 href 값을 스프링 서버를 거치면 선언한 속성으로 변경해준다, 만약 값이 없다면 새로 생성해준다.
// HTML : href 속성(정적으로 적용) , 서버 통한 뷰 템플릿 : th:href(동적으로 적용)
 
 
// URL 링크 표현식 - @{...}
 
th:href="@{/css/bootstrap.min.css}"
 
// URL 링크를 사용하는 경우 @{...}을 사용한다.
// URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다.
 
 
// th:onclick - 속성 변경, 버튼 클릭 이벤트 대체, 해당 경로로 이동
 
onclick = "location.href='addForm.html'"
 
th:onclick="|location.href='@{/basic/items/add}'|"
 
// 리터럴 대체 - |...|
 
// 1. 타임리프에서 문자와 표현식 등은 분리되어 있기 때문에 원래는 자바처럼 더해서 사용해야 한다.
 
<span th:text="'Welcome, ' + ${user.name}" + '!'">
 
// 2. 리터럴 대체 문법을 사용하면, 더하기 같은 묶는 기능을 타입리프에서 처리해준다.
 
<span th:text="|Welcome, ${user.name}!|">
 
 
// 반복 출력 - th:each
 
<tr th:each="item : ${items}">
 
/* 
    이렇게 하면 모델에 포함된 items 컬렉션 데이터가 item 변수에 하나씩 포함 되고, 반목문 안에서
    item 변수를 사용할 수 있다.
 
    컬렉션의 수 만큼 <tr></tr>이 하위 태그를 포함해서 생성된다.
*/
 
// 변수 표현식 - ${...}
 
<td th:text = "${item.price}">10000</td>
 
// 모델에 포함된 값이나, 타임리프 변수로 선언한 값을 조회할 수 있다.
 
 
// 내용 변경 - th:text
 
<td th:text="${item.price}">10000</td>
 
/*
    내용의 값을 th:text의 값으로 변경한다.
    여기서는 10000을 ${item.price}의 값으로 변경한다.
*/
 
// 속성 변경 - th:value
 
<th:value = "${item.id}">
 
- 모델에 있는 item 정보를 획득하고 value 속성값을 item.id 값으로 바꿔준다.
 
 
// 속성 변경 - th:action
 
/*
    HTML form에서 action에 값이 없으면 현재 URL에 데이터를 전송한다.
    
    하나의 url로 2가지의 상태처리를 할 수 있도록 하는 코드
 
    1. 상품 등록 폼: GET.... /basic/items/add
    2. 상품 등록 처리: POST.... ./basic/items/add
 
*/
 
 
// URL 링크 표현식
 
th:href="@{basic/items/{itemId}(itemId=${item.id})}"
 
/*
    item.id 값을 모델에서 가져와서 대입해주고 해당 값을 경로 파라미터에다가 대입해준다
    이 값을 href 값으로 사용한다.
*/
 
 
 
 cs
728x90
저작자표시 비영리 (새창열림)

'Spring' 카테고리의 다른 글

Spring / Projection 정리 (개인 프로젝트 부분 발췌)  (0) 2025.09.24
Spring / @ModelAttribute, 스프링 redirect : 미니 정리  (0) 2025.09.23
Spring / 정적 리소스, 뷰 템플릿 변환 반환, Rest API 형태 반환 방법 정리  (0) 2025.09.16
Spring / HTTP 요청 메시지(단순 텍스트, JSON) 데이터 스프링 전달 및 응답 방법 정리  (0) 2025.09.15
Spring / @Data, @Builder, @Builder.default, ModelMapper 정리  (1) 2025.09.14
'Spring' Related Articles more
Comments