[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

작은 새의 날개짓