타임리프 thymeleaf 정리 (2)

이어서 타임리프 문법에 대해서 알아보겠다.

리터럴

리터럴은 많이 접한 단어일 것이다.
리터럴은 고정된 값을 말한다.
int a = 10이라하면 10은 숫자 리터럴이다.
타임리프는 문자, 숫자, 불린, null 리터럴이 있다.

타임리프에서는 문자 리터럴은 ' ' 작은 따옴표로 감싸야하지만 공백없이 쭉 이어진다면 작은 따옴표를 생략할 수 있다.

<span th:text="hello world!"> (X)

<span th:text="'hello world!'"> (O)

하지만 | |를 사용하면 띄어쓰기가 있더라도 ''를 생략할 수 있다.
data는 model.addAttribute("data", "Spring!");라 생각하자.

 <span th:text="|hello ${data}|">

---

연산

타임리프에서의 연산은 우리가 프로그래밍을 하면서 사용한 연산과 비슷해서 쉽게 학습할 수 있을 것이다.

• 산술 및 비교연산
  단, 주의해야하는 부분이 있다.

<span th:text="10+2">
<span th:text="10 % 2">

• 주의! HTML 엔티티 사용 시 주의해야한다
  • ge >
  • lt <
  • 등등

<span th:text="1 &gt; 10"> <!-- 1 > 10 -->

• 조건식
  조건식 ? 참일 때의 값 : 거짓일 때의 값

<span th:text="(10 % 2 == 0) ? '짝수' : ' 홀수'">

• Elvis 연산자
  data에 값이 있으면 출력하고 없으면 '데이터가 없습니다'를 출력한다.
  조건식의 축약버전같은 느낌이라고 생각하면된다.

  "${data}?:"연산자는 data에 데이터가 없으면 를 실행하는데 _는 어떠한 연산도 수행하지 않겠다는 의미이다.

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

<span th:text="${data}?:_"></span>

• 반복
  타임리프에서 반복은 th:each를 사용한다
  user객체가 있고 프로퍼티러 username, age가 있다고 가정하자.
  그리고 Model에 users라는 이름으로 list타입을 넘겼다고 생각하자.
  반복문 안에 있는 태그가 반복문을 돌면서 생성되는 것이다.

 <tr th:each="user : ${users}">
    <td th:text="${user.username}">username</td>
    <td th:text="${user.age}">age</td>
  </tr>

반복 결과 생성된 태그들

  <tr>
    <td>UserA</td>
    <td>10</td>
  </tr>
  <tr>
    <td>UserB</td>
    <td>20</td>
  </tr>
  <tr>
    <td>UserC</td>
    <td>30</td>
  </tr>

• 근데 반복 상태를 확인하고 싶을 수 있다. 반복 상태를 확인한다는 것은 현재 객채의 index를 알고싶다거나, 현재 객체의 size를 알고싶다거나 등을 의미한다고 생각하면 된다.
• 반복 상태를 확인하고싶은 경우 2번쨰 파라미터를 설정해주면된다.
• 2번째 파라미터같은 경우 생략이 가능한데 생략하면 지정한 변수명 + Stat가 디폴트값이다.
• 예시를 보면 바로 어떤 의미인지 알 것이다.

<tr th:each="user, userStat : ${users}">
    <td th:text="${userStat.count}"></td>
    <td th:text="${user.username}"></td>
    <td th:text="${user.age}"></td>
    <td>
      index = <span th:text="${userStat.index}"></span>
      count = <span th:text="${userStat.count}"></span>
      size = <span th:text="${userStat.size}"></span>
      even? = <span th:text="${userStat.even}"></span>
      odd? = <span th:text="${userStat.odd}"></span>
      first? = <span th:text="${userStat.first}"></span>
      last? = <span th:text="${userStat.last}"></span>
      current = <span th:text="${userStat.current}"></span>
    </td>
  </tr>

• first나 last는 처음이냐 마지막이냐를 의미한다.

---

조건식

타임리프의 조건식은 th:if , th:unless, switch문이 있다.
만약 조건문을 충족하면 태그가 보이지만 조건문을 충족하지 못하면 태그 자체가 안보인다.
바로 예시를 보자.

th:if , th:unless

 <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>
 <span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>

th:switch

 <td th:switch="${user.age}">
      <span th:case="10">10살</span>
      <span th:case="20">20살</span>
      <span th:case="*">기타</span>
    </td>

블록

타임리프에서 블록은 th:block인데 이 문법은 HTML문법이 아닌 타임리프 자체의 태그이다.

약간 특별한 경우일 때 사용하는데
예를들어 다음과 같은 코드를 하나의 묶음으로 반복하고 싶을 수 있다.

  <div>
    사용자 이름1 <span th:text="${user.username}"></span>
    사용자 나이1 <span th:text="${user.age}"></span>
  </div>
  <div>
    요약 <span th:text="${user.username} + '/' + ${user.age}"></span>
  </div>

그런데 만약 아래와 같이 작성하면

  <div th:each="user : ${users}">
    사용자 이름1 <span th:text="${user.username}"></span>
    사용자 나이1 <span th:text="${user.age}"></span>
  </div>
  <div>
    요약 <span th:text="${user.username} + '/' + ${user.age}"></span>
  </div>

이 부분들만 반복되서 출력된다.

<div th:each="user : ${users}">
    사용자 이름1 <span th:text="${user.username}"></span>
    사용자 나이1 <span th:text="${user.age}"></span>
  </div>

그래서 이럴때 th:block 태그를 사용해주면 해결할 수 있다.

<th:block th:each="user : ${users}">
  <div>
    사용자 이름1 <span th:text="${user.username}"></span>
    사용자 나이1 <span th:text="${user.age}"></span>
  </div>
  <div>
    요약 <span th:text="${user.username} + '/' + ${user.age}"></span>
  </div>
</th:block>

참고로 <th:block>태그는 렌더링시 사라진다.