[Thymeleaf] 타임리프3

리터럴(Literals)

리터럴은 소스 코드상에 고정된 값을 말하는 용어이다.

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

• "Hello" : 문자 리터럴
• 10, 20 : 숫자 리터럴

리터럴 종류

• 문자 : 'hello'
• 숫자 : 10
• 불린 : true, false
• null : null

타임리프에서 문자 리터럴은 항상 '(작은 따옴표)로 감싸야 한다.
<span th:text="'hello'">

하지만 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 작은 따옴표를 생략할 수 있다.
룰 : A-Z, a-z, 0-9, [], ., -, _
<span th:text="hello">

BasicController

@GetMapping("/literal")
public String literal(Model model) {
    model.addAttribute("data", "Spring!");
    return "basic/literal";
}

---

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

리터럴 대체(Literal substitutions)
<span th:text="|hello ${data}|">

연산

자바와 크게 다르지 않지만 HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분은 주의해야 한다.

BasicController

@GetMapping("/operation")
public String operation(Model model) {
    model.addAttribute("nullData", null);
    model.addAttribute("data", "Spring!");
    return "basic/operation";
}

---

<!-- 산술 연산 -->
<li>10 + 2 = <span th:text="10 + 2"></span></li>
<li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>

<!-- 비교 연산 -->
<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>

<!-- 조건식 -->
<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>

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

• 비교 연산 : HTML 엔티티를 사용해야 하는 부분을 주의.
  • >(gt)
  • <(lt)
  • >=(ge)
  • <=(le)
  • !(not)
  • ==(eq)
  • !=(neq, ne)
• 조건식 : 자바의 조건식과 유사.
• Elvis 연산자 : 조건식의 편의 버젼
• No-Operation : 조건이 _인 경우 타임리프가 실행되지 않는 것 처럼 동작.
  • 잘 활용하면 HTML의 내용 그대로 활용할 수 있다.

속성 값 설정(Attribute)

th:*로 속성을 적용하면 기존 속성을 대체하고, 기존 속성이 없으면 새로 만든다.

BasicController

@GetMapping("/attribute")
public String attribute() {
    return "basic/attribute";
}

---

<!-- 속성 설정 -->
<input type="text" name="mock" th:name="userA" />

<!-- 속성 추가 -->
- th:attrappend = 
<input type="text" class="text" th:attrappend="class=' large'" /><br/>

- th:attrprepend = 
<input type="text" class="text" th:attrprepend="class='large '" /><br/>

- th:classappend = 
<input type="text" class="text" th:classappend="large" /><br/>

<!-- checked 처리 -->
- checked o <input type="checkbox" name="active" th:checked="true" /><br/>
- checked x <input type="checkbox" name="active" th:checked="false" /><br/>
- checked=false <input type="checkbox" name="active" checked="false" /><br/>

속성 추가

• th:attrappend: 속성 값의 뒤에 값을 추가한다. (잘 사용X)
• th:attrprepend: 속성 값의 앞에 값을 추가한다. (잘 사용X)
• th:classappend: class 속성에 자연스럽게 추가
  • class="text large"

checked 처리
HTML에서는 checked="false"인 경우에도 checked 속성이 있기 때문에 checked 처리가 되어버린다.

타임리프의 th:checked는 값이 false인 경우 checked속성 자체를 제거한다.

• <input type="checkbox" name="active" th:checked="false" />
  
  • -> <input type="checkbox" name="active" />

<출처 : 인프런 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술(김영한)>