Spring/Spring MVC
Spring MVC - 타임리프(Thymeleaf) 리터럴과 연산
jddng
2022. 2. 2. 21:26
728x90
반응형
리터럴
리터럴은 소스 코드상에서 고정된 값을 말한다.
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 > 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의 내용 그대로 출력된 것을 확인할 수 있다
728x90
반응형