[Thymeleaf] Operations (연산)

타임리프에서 사용되는 연산식에 대해 살펴보고자 한다

대부분 자바의 연산식과 비슷하기 때문에 간단히 살펴보겠다

 

Arithmetic Operation (산술 연산)

<!-- 산술 연산 -->
<span th:text="10 + 2">result</span> <!-- 출력 결과 : 12 -->
<span th:text="10 % 2 == 0">result</span> <!-- 출력 결과 : true -->

 

Comparators and Equality (비교 연산)

HTML 엔티티를 사용해야 하는 부분을 주의해야 한다

> (gt) , <(lt) , >=(ge), <=(le), !(not), ==(eq), !=(neq, ne)

<!-- 비교연산 -->
<span th:text="1 &gt; 10">result</span> <!-- 출력 결과 : false -->
<span th:text="1 gt 10">result</span> <!-- 출력 결과 : false -->
<span th:text="1 >= 10">result</span> <!-- 출력 결과 : false -->
<span th:text="1 ge 10">result</span> <!-- 출력 결과 : false -->
<span th:text="1 == 10">result</span> <!-- 출력 결과 : false -->
<span th:text="1 != 10">result</span> <!-- 출력 결과 : true -->

 

Conditional Expressions (조건식)

조건식을 실행하여 true면 앞에 있는 값이 치환되어 출력, false면 뒤에 있는 값이 치환되어 출력

<!-- Conditional Expressions -->
<span th:text="(10 % 2 == 0)? '짝수':'홀수'">result</span> <!-- 출력 결과 : 짝수 -->

 

Default Expressions .aka Elvis Operator (엘비스 연산)

조건식의 편의 버전이다 true면 해당 값을 출력하고 false면 뒤에 있는 값을 치환하여 출력한다

<!-- ?: 이게 엘비스를 닮았다고 하여 엘비스 연산 -->
<span th:text="${data}?: 'null data'">result</span> <!-- 출력 결과 : ${data}의 값 -->
<span th:text="${nullData}?: 'null data'">result</span> <!-- 출력 결과 : null data -->

 

No-Operation

말 그대로 타임리프가 Operation, 작동하지 않는 것이다 아래와 같이 값이 있는 ${data}의 경우 치환되어 출력되지만

값이 없는 ${nullData}인 경우에는 치환되지 않고 HTML의 null data가 출력된다

<!-- no operation -->
<span th:text="${data}?: _">null data</span> <!-- 출력 결과 : ${data}의 값 -->
<span th:text="${nullData}?: _">null data</span> <!-- 출력 결과 : null data -->

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html