인프런 김영한님의 Spring강의에서 공부한것을 올리며, Thymeleaf의 경우 unit 단위로 공부후 각각 정리하는 글을 작성하겠습니다.
연산
연산은 HTML의 엔티티를 사용하는 부분만 주의하면 됩니다.
이번 연산 글은 우선 코드로 살펴본후 설명을 이어 나가겠습니다.
우선 다음 컨트롤러를 확인해 봅시다.
@GetMapping("/operation")
public String operation(Model model) {
model.addAttribute("nullData", null);
model.addAttribute("data", "zbqmgldjfh");
return "basic/operation";
}이를 처리하는 뷰 코드는 다음과 같습니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>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 > 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>
</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>
실행 결과는 다음과 같습니다.
- 비교연산자
비교연산의경우 HTML 엔티티를 사용해야 하는 부분을 주의합시다. (아래 도큐먼트 참고)
> (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)
하지만 우리의 코드를 보면 위에서 >= 와 같이 직접적으로 비교연산을 사용하기도 했습니다. 어떻게 된것 일까요?
원칙적으로 엔티티표현을 사용하는 것이 맞으며, 엔티티표현을 사용하지 않으면 HTML, XML에서 문제가 될 수도 있습니다.
(문제가 되지 않도록 타임리프도 노력하지만 문제가 될 수도 있다 정도로 생각하시면 됩니다.)
- 조건식: 자바의 조건식과 유사합니다. 설명 생략
- Elvis 연산자: 조건식의 편의 버전
${} 안에 변수의 값에 값이 있다면 그 값을 표현해주고, 값이 없다면 ?: 뒤에 있는 '데이터가 없습니다.' 를 출력해줍니다.
<span th:text="${nullData}?: '데이터가 없습니다.'"></span>- No-Operation: _ 의 경우 마치 타임리프가 실행되지 않는 것 처럼 동작합니다.
<li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>
<li>${nullData}?: _ = <span th:text="${nullData}?: _">바뀌어야 하는 곳</span></li>위 코드에서 첫줄은 data가 있기 때문에 data의 내용인 zbqmgldjfh가 출력되었습니다.
두번째 줄은 data가 없기 때문에 타임리프의 내용이 무시되고, 원래있던 "바뀌어야 하는 곳" 이 출력되었습니다.
'BackEnd > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 반복 (0) | 2022.01.27 |
|---|---|
| [Thymeleaf] 속성 값 설정 (0) | 2022.01.27 |
| [Thymeleaf] Literals (0) | 2022.01.26 |
| [Thymeleaf] URL 링크 (0) | 2022.01.26 |
| [Thymeleaf] 유틸리티 객체와 날짜 (0) | 2022.01.26 |
댓글