Spring MVC - 타임리프(Thymeleaf) 리터럴과 연산

 

 

 

 

리터럴

 리터럴은 소스 코드상에서 고정된 값을 말한다. 

 

String a = "Hello"
int a = 10 * 20

 위 코드에서 "Hello"는 문자 리터럴, 10, 20은 숫자 리터럴이다.

---

 

 

타임리프 문자 리터럴

 

문자 리터럴

 

• 문자 리터럴은 항상 '(작은 따옴표)로 감싸야 한다.
• 공백 없는 문자 리터럴은 하나의 토큰으로 인지되어 작은 따옴표 생략 가능하다
  "hello" -> 작은 따옴표 생략 가능, "hello world" -> 작은 따옴표 생략 불가능

 

<li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>
<li>'hello world!' = <span th:text="'hello world!'"></span></li>
<li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<li>'hello' + ' world!' = <span>hello world!</span></li>
<li>'hello world!' = <span>hello world!</span></li>
<li>'hello ' + ${data} = <span>hello Spring!</span></li>

---

 

리터럴 대체 문법

 

• 리터럴 대체 문법을 사용하면, 더하기 연산 없이 편리하게 사용할 수 있다.
• " | ..... | "

 

<li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<li>리터럴 대체 |hello ${data}| = <span>hello Spring!</span></li>

---

 

타임리프 연산

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

 

비교연산

 

 연산자를 그냥 써도 되지만 혹시나 이스케이프가 될 수 있기때문에 가능한 HTML 엔티티 연산자를 사용하는 것을 권장한다.

연산자	HTML 엔티티 연산자
>	gt
<	lt
>=	ge
<=	le
!	not
==	eq
!=	neq, ne

 

<li>1 > 10 = <span th:text="1 &gt; 10"></span></li>
<li>1 > 10 = <span th:text="1 > 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>

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<li>1 > 10 = <span>false</span></li>
<li>1 > 10 = <span>false</span></li>
<li>1 gt 10 = <span>false</span></li>
<li>1 >= 10 = <span>false</span></li>
<li>1 ge 10 = <span>false</span></li>
<li>1 == 10 = <span>false</span></li>
<li>1 != 10 = <span>true</span></li>

---

 

조건식과 Elvis 연산자

 

• 자바의 조건식과 유사하다
• Elvis 연산자는 조건식의 편의 버전이다.
   - [데이터1] ?: [데이터2]
   - 데이터1에 null 아닌 데이터 값이 있으면 데이터1 출력, 값이 없으면 데이터2 출력

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

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

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<li>(10 % 2 == 0)? '짝수':'홀수' = <span>짝수</span></li>

<li>${data}?: '데이터가 없습니다.' = <span>Spring!</span></li>
<li>${nullData}?: '데이터가 없습니다.' = <span>데이터가 없습니다.</span></li>

---

 

No-Operation ( _ )

 

• _ 인 경우 조건에 따라 마치 타임리프가 실행되지 않는 것처럼 동작한다

 

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

 서버를 가동시켜 웹브라우저에서 HTML의 소스 코드를 보면 다음과 같다.

<li>${data}?: _ = <span>Spring!</span></li>
<li>${nullData}?: _ = <span>데이터가 없습니다.</span></li>

 nullData에 null 값이 들어갔으므로 Elvis 연산자에 의해서 No-Operation( _ ) 이 선택되어 원래 HTML의 내용 그대로 출력된 것을 확인할 수 있다