Thymeleaf에서는 산술 연산, 비교 연산, 조건식, Elvis 연산자, No-Operation 같은 다양한 연산을 지원한다. 기본 개념은 자바와 비슷하지만, HTML 안에서 쓰는 표현식이라는 점에서 몇 가지 주의해야 할 사항이 있다. 이번 글에서는 각각을 예제와 함께 살펴보자.

 

1. 컨트롤러 코드 준비

컨트롤러에서 테스트 데이터를 모델에 담아 뷰로 전달한다.

@GetMapping("/operation")
public String operation(Model model) {
    model.addAttribute("nullData", null);
    model.addAttribute("data", "Spring!");
    return "basic/operation";
}

 

2. 뷰 템플릿 예제

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>연산 예제</title>
</head>
<body>
<ul>
  <li>산술 연산
    <ul>
      <li>10 + 2 = <span th:text="10 + 2"></span></li>
      <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
    </ul>
  </li>

  <li>비교 연산
    <ul>
      <li>1 &gt; 10 = <span th:text="1 &gt; 10"></span></li>
      <li>1 gt 10 = <span th:text="1 gt 10"></span></li>
      <li>1 >= 10 = <span th:text="1 >= 10"></span></li>
      <li>1 ge 10 = <span th:text="1 ge 10"></span></li>
      <li>1 == 10 = <span th:text="1 == 10"></span></li>
      <li>1 != 10 = <span th:text="1 != 10"></span></li>
    </ul>
  </li>

  <li>조건식
    <ul>
      <li>(10 % 2 == 0)? '짝수':'홀수' =
        <span th:text="(10 % 2 == 0)? '짝수':'홀수'"></span>
      </li>
    </ul>
  </li>

  <li>Elvis 연산자
    <ul>
      <li>${data}?: '데이터가 없습니다.' =
        <span th:text="${data}?: '데이터가 없습니다.'"></span>
      </li>
      <li>${nullData}?: '데이터가 없습니다.' =
        <span th:text="${nullData}?: '데이터가 없습니다.'"></span>
      </li>
    </ul>
  </li>

  <li>No-Operation
    <ul>
      <li>${data}?: _ =
        <span th:text="${data}?: _">데이터가 없습니다.</span>
      </li>
      <li>${nullData}?: _ =
        <span th:text="${nullData}?: _">데이터가 없습니다.</span>
      </li>
    </ul>
  </li>
</ul>
</body>
</html>

 

 

3. 실행 결과와 설명

1) 산술 연산

  • 10 + 2 → 12
  • 10 % 2 == 0 → true

자바와 동일하게 사칙연산, 나머지 연산 등을 사용할 수 있다.

 

2) 비교 연산

  • HTML 특성상 <, > 같은 기호는 엔티티로 바꿔 써야 한다.
    • > → &gt;, < → &lt;
  • 연산자는 자바 스타일과 Thymeleaf 스타일 둘 다 지원한다.
    • > 와 gt
    • < 와 lt
    • >= 와 ge
    • <= 와 le
    • == 와 eq
    • != 와 neq 또는 ne

예) 1 &gt; 10 → false, 1 gt 10 → false

 

 

3) 조건식 (삼항 연산자)

(10 % 2 == 0)? '짝수':'홀수'

결과: 짝수
자바의 삼항 연산자와 동일하게 동작한다.

 

4) Elvis 연산자

${data}?: '데이터가 없습니다.' ${nullData}?: '데이터가 없습니다.'
  • data = "Spring!" → Spring! 출력
  • nullData = null → 데이터가 없습니다. 출력

조건식을 짧게 쓸 수 있는 문법이다.
즉, 값이 있으면 그대로, 없으면 오른쪽 기본값을 출력한다.

 

5) No-Operation (_)

<span th:text="${data}?: _">데이터가 없습니다.</span>
  • data = "Spring!" → Spring!
  • nullData = null → 태그 안의 원래 값 데이터가 없습니다. 출력

즉, _를 쓰면 값이 없을 때는 타임리프가 처리하지 않고 원래 HTML 내용을 그대로 둔다.

 

마무리하며

Thymeleaf의 연산 기능은 자바와 거의 같아서 익숙하게 사용할 수 있다.
다만, HTML 안에서는 <, > 같은 기호를 엔티티(>, <)로 써야 한다는 점을 꼭 기억해야 한다.

또한 조건식, Elvis 연산자, No-Operation 같은 문법은 타임리프에서 제공하는 편의 기능이다.

  • Elvis 연산자 → 값이 없을 때 기본값을 간단히 지정
  • No-Operation → 값이 없을 때 HTML 원문을 그대로 출력

이런 기능들을 잘 활용하면, 화면을 훨씬 깔끔하고 안전하게 작성할 수 있을 것이다.

 

 

감사합니다.

'타임리프' 카테고리의 다른 글

[Thymeleaf] 반복  (0) 2025.09.16
[Thymeleaf] 속성 값 설정  (0) 2025.09.15
[Thymeleaf] 리터럴  (1) 2025.09.15
[Thymeleaf] URL링크  (0) 2025.09.15
[Thymeleaf] 유틸리티 객체와 날짜  (0) 2025.09.15

티스토리툴바