본문 바로가기
Spring/Spring Boot & Thymeleaf

[Spring Boot & Thymeleaf] 8. 연산/연산자

by Kloong 2022. 10. 24.

참고

더보기

Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.

 

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

웹 애플리케이션 개발에 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. MVC 2편에서는 MVC 1편의 핵심 원리와 구조 위에 실무 웹 개발에 필요한 모든 활용 기술들을 학습할 수 있

www.inflearn.com

마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.

 

GitHub - Kloong1/TIL: Today I Learned.

Today I Learned. Contribute to Kloong1/TIL development by creating an account on GitHub.

github.com

타임리프 - 연산

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

BasicController.java 내용 추가
package kloong.thymeleaf.basic;

import ... //생략

@Controller
@RequestMapping("/basic")
public class BasicController {

    @GetMapping("operation")
    public String operation(Model model) {
        model.addAttribute("nullData", null);
        model.addAttribute("data", "Thymeleaf!");
        return "basic/operation";
    }
}
/resources/templates/basic/operation.html
<!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 &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>
            <li>null?: 'null 입니다' = <span th:text="null?:'null 입니다.'"></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, &gt;
    • < : lt, &lt;
    • >= : ge
    • <= : le
    • ! : not
    • == : eq
    • != : neq, ne
  • 조건식
    • <span th:text="(10 % 2 == 0)?'짝수':'홀수'">
    • 자바의 삼항 연산자와 비슷하다.
  • Elvis 연산자 ?:
    • 데이터가 존재하면, 즉 null 이 아니면 데이터를 출력한다.
    • null 이면 ?: 다음 값을 출력한다.
  • No-Operation _
    • 마치 타임리프가 실행되지 않는 것 처럼 동작한다.
    • 해당 타임리프 태그 속성이 무시된다.
    • 이것을 잘 사용하면 HTML 의 내용을 그대로 활용할 수 있다. 마지막 예시를 보면 데이터가 없습니다 가 그대로 출력된다.

댓글