Spring Boot STEP 4 - Thymeleaf2

★ 타임리프 연산자

• 산술 연산자 > 동일

<div th:text="${a} + ${b}"></div>
<div th:text="${a} - ${b}"></div>
<div th:text="${a} * ${b}"></div>
<div th:text="${a} / ${b}"></div>
<div th:text="${a} % ${b}"></div>

• 비교 연산자 > 동일 + 영문 표현 제공

<div th:text="${a} <= ${b}"></div>
<div th:text="${a} == ${b}"></div>
<div th:text="${a} != ${b}"></div>

• 논리 연산자 > 동일 + 영문 표현 제공

<div th:text="${a > 5} and {b < 10}"></div>
<div th:text="${a > 5} or {b < 10}"></div>

• 삼항 연산자 > 동일 

<div th:text="${c} != null ? ${c} : '데이터 없음'"></div>
<div th:text="${c} ? ${c} : '데이터 없음'"></div>
<div th:text="${c} ?: '데이터 없음'"></div> <!-- Elvis 연산자 -->
<div th:text="${c} ?: _">데이터 없음</div> <!-- No-Operation -->

• 문자열 연산자 > 동일

 

★ HTML 속성 조작

• th:HTML속성명="값"
• 기존에 동일한 속성이 선언되어 있으면 대체한다.
• 기존에 동일한 속성이 선언되어 있지 않으면 추가한다.
• 대부분 서버에서 전달 받은 값(model)은 

- 직접 표현식으로 아무곳에서 사용이 불가능(${key})
- 표현식은 반드시 th:속성에만 적용이 가능

• 사용 ex)

<div>${name}</div>
<div th:text="${name}"></div>

<input type="text" name="age">
<input type="text" th:name="age">
<input type="text" name="${name}">
<input type="text" th:name="${name}">
<input type="text" th:name="${name}" th:size="${size}">
<input type="text" th:value="${color}">

<hr>

<div class="one">Box 1</div>	 
<div th:class="one">Box 2</div>	 
<div class="one" th:class="two ">Box 3</div>

<div class="one" th:attrappend="class=' two'">Box 4</div>
<div class="one" th:attrprepend="class='two '">Box 5</div>

<div class="one" th:classappend="two">Box 6</div>

<input type="checkbox" name="cb" th:checked="true">
<input type="checkbox" name="cb" th:checked="false">


<!-- <div style="background-color:${color}">Box 7</div> -->
<div th:style="'background-color:' + ${color}">Box 7</div>
<div th:style="|background-color:${color}|">Box 7</div>

 

★ PCDATA 조작

• HTML 콘텐츠 영역 > 데이터 출력

1. th:text
    - escaped text
    - '<' -> &lt;
    - '>' -> &gt;

2. th:utext
    - unescaped text
    - 그대로 출력
    
<코드>
<div th:text="${txt}"></div>
<div th:utext="${txt}"></div>

• 인라인 출력

1. th:inline="text" // 사용 잘 안함
2. th:inline="javascript" //많이 사용(필수)

1. th:inline + [[]] //escaped text
2. th:inline + [()] //unescaped text

<코드>
<div th:text="${txt}"></div>
	 <div th:utext="${txt}"></div>
	 
	 <hr>
	 
	 <div th:inline="text">[[${name}]]</div>
	 <div th:inline="text">[(${name})]</div>
	 
	 <div th:inline="text">[[${txt}]]</div>
	 <div th:inline="text">[(${txt})]</div>
	 
	 <div>[[${txt}]]</div>
	 
	 <!--/*
	 <div th:inline="text">[[${a}]] + [[${b}]] = [[${a + b}]]</div>
	 */-->
	 
	 <hr>
	 
	 <div id="label1"></div>
	 <div id="label2"></div>
	 
<script>

	let name1 = '[[${name}]]';
	let num1 = [[${num}]];
	let names1 = '[[${names}]]';
	let dto1 = '[[${dto}]]';

	document.getElementById('label1').textContent = name1;
	
</script>
<script th:inline="javascript">

	let name2 = [[${name}]];
	let num2 = [[${num}]];
	let names2 = [[${names}]];
	let dto1 = [[${dto}]];

	document.getElementById('label2').textContent = name2;
	
</script>

 

★ 데이터를 일정한 형식으로 표현하는 도구

• #numbers
• #dates

<h2>숫자</h2>

<div th:text="${num1}"></div>
<div th:text="${#numbers.formatInteger(num1, 3, 'COMMA')}"></div>

<div th:text="${num2}"></div>
<div th:text="${#numbers.formatDecimal(num2, 3, 'COMMA', 2, 'POINT')}"></div>

<hr>

<h2>날짜</h2>

<div th:text="${#dates.year(now)}"></div>
<div th:text="${#dates.month(now)}"></div>
<div th:text="${#dates.monthName(now)}"></div>
<div th:text="${#dates.monthNameShort(now)}"></div>
<div th:text="${#dates.day(now)}"></div>
<div th:text="${#dates.hour(now)}"></div>
<div th:text="${#dates.minute(now)}"></div>
<div th:text="${#dates.second(now)}"></div>
<div th:text="${#dates.millisecond(now)}"></div>
<div th:text="${#dates.dayOfWeek(now)}"></div>
<div th:text="${#dates.dayOfWeekName(now)}"></div>
<div th:text="${#dates.dayOfWeekNameShort(now)}"></div>

<div th:text="${#dates.format(now)}"></div>
<div th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}"></div>
<div th:text="${#dates.format(now, 'yyyy-MM-dd aa hh:mm:ss')}"></div>

 

★ 링크 주소 만들기

Link URL Expressions
- @{}
- 링크의 URL 표현
a. 매개변수 처리 쉽다.
b. Context Root Path가 자동으로 삽입

• 사용 ex)

<div><a href="/m7">이전 페이지</a></div>
<div><a href="/spring/m7">이전 페이지</a></div>

<div><a th:href="@{/m7}">이전 페이지</a></div>

<hr>

<h3>QueryString, 매개변수</h3>
<div><a href="/m7?seq=100">이전 페이지</a></div>
<div><a href="/m7?seq=${seq}">이전 페이지</a></div>
<div><a th:href="@{/m7(seq=${seq})}">이전 페이지</a></div>

<div><a href="/m7?seq=100&mode=add">이전 페이지</a></div>
<div><a th:href="@{/m7(seq=${seq}, mode=${mode})}">이전 페이지</a></div>