본문 바로가기
SSR/Thymeleaf

Thymeleaf (2)

by oncerun 2022. 1. 4.
반응형

  ◦ 링크 URL 표현식: @{...}

 

타임리프에서 <a> 태그의 location.href  속성에 많이 사용하는 URL 링크에는 별도의 표현식이 존재한다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h1>URL 링크</h1>
<ul>
  <li><a th:href="@{/hello}">basic url</a></li>
  <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello queryparam</a></li>
  <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
  <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
</ul>
</body>
</html>

 - th:href= " @{ ( param1=${param1}, param2=${param2} ) }

 쿼리 파라미터를 붙여주는데  콤마(,)로 구분해 여러 개를 제공할 시 자동적으로 &으로 변환되어진다.

 

 - th:href= " @{ /hello/{param1}( param1=${param1}, param2=${param2} ) } 

 이 경우는 param2의 값이 남는데, 남은 param2는  쿼리 파라미터로 넘어가게 된다.

 

 

◦ 선택 변수 표현식: *{...}

  ◦ 메시지 표현식: #{...}

  ◦ 조각 표현식: ~{...}

• 리터럴

 - 소스 코드상에 고정된 값을 말하는 용어이다.

  ◦ 텍스트: 'one text', 'Another one!',…

     - 타임리프에서 문자 리터럴은 항상 '( 작은따옴표)로 감싸야한다.

    그런데 항상 작은따옴표로 감싸는 일은 매우 귀찮기 때문에 타임리프에서는 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해 작은 따옴표를 생략할 수 있다.

<span th:text="hello world!"><span>   틀린 방법

<span th:text="'hello world!'"><span>  맞는 방법

 스페이스로 구분되어 처리되었기 때문에 이어졌다고 볼 수 없기에 에러를 출력한다. 따라서 띄어쓰기, 공백이 있는 경우에는 작은 따옴표로 꼭 감싸야한다.

 

 

  ◦ 숫자: 0, 34, 3.0, 12.3,…

 

  ◦ 불린: true, false

 

  ◦ 널: null

 

  ◦ 리터럴 토큰: one, sometext, main,…

 

타임리프 연산은 자바와 크게 다르지 않지만 HTML안에서 사용하기 때문에 HTML 엔티티( >, <..)를 사용하는 부분만 주의하자

 

• 문자 연산:

  ◦ 문자 합치기: +

  ◦ 리터럴 대체: |The name is ${name}|

<span th:text="|hello world!|"><span>

기존 리터럴 표현법이 작은따옴표로 구분하고 문자열을 합치기 위해서 + 연산자를 사용했던 거와 달리 대체 문법을 통해 쉽게 사용할 수 있다.

 

• 산술 연산: ◦ Binary operators: +, -, *, /, %

  ◦ Minus sign (unary operator): -

<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>
</ul>

• 비교와 동등:

  ◦ 비교: >, <, >=, <= (gt, lt, ge, le)

  ◦ 동등 연산: ==,!= (eq, ne)

<ul>
  <li>비교 연산
    <ul>
      <li>1 > 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>
</ul>

• 조건 연산: ◦ If-then: (if)? (then)

  ◦ If-then-else: (if)? (then) : (else)

  ◦ Default: (value)?: (defaultvalue)


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

• 특별한 토큰: ◦ No-Operation: _

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

 

 * Elvis연산자 뒤에 _라는 No-Operation이 오는 경우 타임리프 태그가 무시되고 HTML 자체가 출력된다.

 

반응형

'SSR > Thymeleaf' 카테고리의 다른 글

Thymeleaf (5)  (0) 2022.01.05
Thymeleaf (4)  (0) 2022.01.05
Thymeleaf (3)  (0) 2022.01.04
Thymeleaf (1)  (0) 2022.01.03

댓글