/thymeleaf-main-point

타임리프 실무에 사용할 핵심 내용 정리

thymeleaf-main-point

타임리프 실무에 사용할 핵심 내용 정리

1. Map data 출력

JAVA) A, B : 객체 인스턴스
Map <String, Object> map = new HashMap<>();
map.put("A", A);
map.put("B", B);
model.addAttribute("map", map);

Template)
<span th:text="${map['A'].data}"></span>
------------------------------------------------------------

2. link (a 태그 href)

JAVA)
model.addAttribute("param1", data1);
model.addAttribute("param2", data2);

Template)
<a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}"></a>
-> /hello/data1?param2=data2
------------------------------------------------------------

3. javascript 안에서 타임리프 반복

JAVA)
List<객체> = new ArrayList<>();
list.add(...)
...
model.addAttribute("list", list)

Template)
<script th:inline="javascript">
[# th:each="data, stat : ${list}"]
var data[[${stat.count}]] = [[${data}]];
[/]
</script>
------------------------------------------------------------

4. switch 문

Template)
<td th:switch="${data.status}">
<span th:case="10">결제 완료</span>
<span th:case="20">배송 준비중</span>
<span th:case="30">배송중</span>
<span th:case="*">기타</span>
</td>
------------------------------------------------------------

5. 연산으로 null 처리 (true 일때 생략)

JAVA)
model.addAttribute("nullData", null);
model.addAttribute("data", "HJ");

Template)
<span th:text="${data}?: '데이터가없습니다.'"></span>
<span th:text="${nullData}?: '데이터가 없습니다.'"></span>
------------------------------------------------------------

6. 쿼리파라미터 가져오기 (param 이용)

URL: ?paramData=data1
Template)
<span th:text="${param.paramData}"></span>
------------------------------------------------------------

7. 현재 시간 변경 처리 (localDateTime을 #temporals을 이용해 변경)

JAVA)
model.addAttribute("localDateTime", LocalDateTime.now());

Template)
<span th:text="${#temporals.day(localDateTime)}"></span>
<span th:text="${#temporals.month(localDateTime)}"></span>
<span th:text="${#temporals.year(localDateTime)}"></span>
<span th:text="${#temporals.dayOfWeekNameShort(localDateTime)}"></span>
<span th:text="${#temporals.hour(localDateTime)}"></span>
<span th:text="${#temporals.minute(localDateTime)}"></span>
<span th:text="${#temporals.second(localDateTime)}"></span>
------------------------------------------------------------

8. 템플릿 레이아웃 replace

Template)
main.html :
<head th:replace="template/layout/head :: common_header(~{::title},~{::link})">
<title>메인 타이틀</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>

head.html :
<head th:fragment="common_header(title,links)">

<title th:replace="${title}">레이아웃 타이틀</title>

<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>

<th:block th:replace="${links}" />
</head>

9. 입력 form 쉽게 처리하는 방법

9-1. input의 id와 name 타임리프로 대신하기

th:object = "${item}" 을 쓰고
th:field="${item.itemName}" 을 input 에 쓰면
이 이름으로 id와 name과 th:value 까지 자동생성 해주고 또한 checkbox에서는 checked 속성까지!

th:field="*{itemName}" : 선택 변수 식
으로 줄여서 쓸 수도 있다 (th:object 로 객체 지정시 *로 인식 가능)

9-2. checkbox 처리

체크를 안했을 때는 서버로 값이 아예 안 넘어가서 false 판단을 못하는데, 그래서 '<input type="hidden" name="_open" value="on" class="form-check-input">'를 추가해줘야됨
checkbox 도 th:field 가 이 hidden 태그 자동 추가 기능을 제공

9-3. each 반복문에서 id - for 처리

<input th:field="*{field}"> // id는 유니크 해야되므로 타임리프에서 filed1, filed2, ... 이렇게 만들어줌
<label th:for="${#ids.prev('input id값')}" > // 이렇게 for 속성 처리하면 동일하게 맞춰짐

9-4. selectbox 처리

selectbox 에서도 th:field 쓰면
th:each문으로 option 돌릴 때 th:value 와 값이 같으면 자동으로 selected 추가

-------------------------------------------------------------