[Thymeleaf] for 사용하기
- Web/Thymeleaf
- 2022. 3. 8.
thymeleaf, for 사용하기
1 - for문 설명하기에 앞 서.
for문의 설명을 쉽게 하기 위해서 해당 페이지는 배열의 도움을 받았다.
내용물은 한글, 영어, 숫자 순으로 '가나다', 'abc', '123' 3개가 저장되어 있다.
2 - each 사용 방법
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>for 가져오기</title>
</head>
<body>
<h1>each(for) 설명</h1>
<h3 style="color: blue">Stage 01</h3>
<th:block th:each="mollang : ${list}">
<h5 th:text="${mollang}"></h5>
</th:block>
</body>
</html>
thymeleaf를 사용하기 위해서는 Java의 forEach개념을 알아야 사용할 수 있다.
어렵다면 어렵고, 쉽다면 쉬운 forEach의 개념을 알고 있다면 쉽게 사용할 수 있다.
th:each="사용 할 별칭 : ${배열 값}
thymeleaf의 구성은 이렇게 되어있다. for문의 괄호 대신 태그를 사용하며, index대신 별칭을 사용한다.
준비된 배열에는 '가나다', 'abc', '123'이 있었으므로, 순서대로 출력되는 것을 확인할 수 있다.
th:each는 th:with처럼 자신의 하위 태그에서만 출력할 수 있다.사용하는 대표적인 예시는 html의 table이다. table 하위에 tr과 td가 존재함으로써, th:each의 사용에 매우 적합하다.
혹은, th:block를 생성하여 대신 사용할 수도 있다.
3 - each의 기능 1
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>for 가져오기</title>
</head>
<body>
<h1>each(for) 설명</h1>
<h3 style="color: blue">Stage 01</h3>
<table>
<tr th:each="list, i : ${list}">
<td th:text="${i.index}"></td>
<td th:text="${list}"></td>
<td th:text="${i}"></td>
</tr>
</table>
</body>
</html>
th:each의 두 번째 사용방법이다.
앞에서는 th:each="사용할 변수 명 : ${배열 값}이었다면,
지금은 th:each="사용할 변수명, 상태 변수명: ${배열 값}이다.
each의 index를 활용하기 위해서는 알고 넘어가야 할 기능 중 하나이다.
그러나 Stat 추가해서 상태 변수를 출력하는 것을 확인할 수 있었다.
위의처럼 2개로 나눌 수도 있고, 아래처럼 하나로만 사용할 수도 있다.
그러므로 반드시 위에처럼 변수를 두 개 선언할 필요는 없었다.
4 - for Each의 기능 2
| 구분 | 설명 |
| index | 0부터 시작하는 index 값이다 |
| count | 1부터 시작하는 index 값이다. |
| size | 배열의 크기를 나타낸다. |
| current | 해당 index의 값을 나타낸다. |
| even | 짝수 여부 |
| odd | 홀수 여부 |
| first | 배열의 첫번째 여부 |
| last | 배열의 마지막 여부 |
each의 상태 변수를 index만 활용하기에는 아쉬워서 좀 더 자세히 알아보았다.
그 결과, 생각보다 더 많은 기능이 자리 잡고 있는 것을 확인할 수 있었다.
위의 기능을 모두 사용할 경우 아래와 같은 결과가 도출되었다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>for 가져오기</title>
<style>
table, tr, td, th {
border : #000 solid 1px;
}
th {
background : aquamarine;
}
td,th {
padding : 5px;
font-size : 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<h1>each(for) 설명</h1>
<h3 style="color: blue">for 응용하기</h3>
<table>
<tr>
<th>index</th>
<th>count</th>
<th>current</th>
<th>even</th>
<th>odd</th>
<th>first</th>
<th>last</th>
</tr>
<tr th:each="result : ${#numbers.sequence(1, 5)}">
<td th:text="${resultStat.index}" ></td>
<td th:text="${resultStat.count}"></td>
<td th:text="${resultStat.current}" ></td>
<td th:text="${resultStat.even}" ></td>
<td th:text="${resultStat.odd}" ></td>
<td th:text="${resultStat.first}" ></td>
<td th:text="${resultStat.last}" ></td>
</tr>
</table>
</body>
</html>
each의 상태 변수를 출력한 결과 위와 같은 조건이 표현되었다.
이를 구분하는 이유는 아무래도 th:if와 같이 사용하기 위함으로 보였다.
index와 true, false의 구분은 if와 아주 찰떡궁합이 될 것만 같다.
5 - 응용하기
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>for 가져오기</title>
<style>
table, tr, td, th {
border : #000 solid 1px;
}
th {
background : aquamarine;
}
td,th {
padding : 5px;
font-size : 20px;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<h1>each(for) 설명</h1>
<h3 style="color: blue">for 응용하기</h3>
<table>
<tr>
<th>index</th>
<th>count</th>
<th>current</th>
<th>even</th>
<th>odd</th>
<th>first</th>
<th>last</th>
</tr>
<tr th:each="result : ${#numbers.sequence(1, 11)}">
<td th:text="${resultStat.index}" th:if="${resultStat.odd}"></td>
<td th:text="${resultStat.count}" th:if="${resultStat.odd}"></td>
<td th:text="${resultStat.current}" th:if="${resultStat.odd}"></td>
<td th:text="${resultStat.even}" th:if="${resultStat.odd}"></td>
<td th:text="${resultStat.odd}" th:if="${resultStat.odd}"></td>
<td th:text="${resultStat.first}" th:if="${resultStat.odd}"></td>
<td th:text="${resultStat.last}" th:if="${resultStat.odd}" th:style="${resultStat.last ? 'background:red':''}"></td>
</tr>
</table>
</body>
</html>
th:each와 th:if를 합쳐서 사용한 결과물이다.
1부터 11까지의 배열을 표현했으며 그중, 홀수만 출력이 된다.
마지막으로 배열의 마지막이 출력될 경우, last만 빨간색 배경이 나타나도록 표현하였다.
'Web > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] template 기능, layout (0) | 2022.03.23 |
|---|---|
| [Thymeleaf] template 기능 - replace (0) | 2022.03.23 |
| [Thymeleaf] if - else 사용하기 (0) | 2022.03.08 |
| [Thymeleaf] with 사용하기 (0) | 2022.03.07 |
| [Thymeleaf] Value 사용하기 (0) | 2022.03.07 |