타임리프 (Thymleaf) 기본 문법 (속성)(1)

text ( th:text )

• 변수 값을 태그의 텍스트로 표시할 때 사용
• th:text 속성과 ${....}구분을 같이 사용

text = hello world

<p th:text = "${text}">결과 값은 "hello world" 입니다.</p>

---

unesape text ( th:utext )

• escape 처리를 하지 않고 표시할 때 사용

test = "<p>test</p>"

escape 처리시 = testescape 미처리시 = <p>test</p>

---

인라인처리 ( th:inline )

• inline 속성에는 text 모드와 javascript 모드가 있다.
• 태그 내의 텍스트 일부를 Controller로 부터 전달된 변수 값으로 표시 할 경우 사용

// text 모드 
<p th:inline="text">Hello, [[${user.name}]] !!!</p>

//javascript 모드
<script th:inline="javascript">
	var name = [[${user.name}]]
</script>

---

삼항연산자 ( ?: )

• 변수의 값이 null일 경우 null대신에 표시할 기본값을 설정

username = null

<p th:text = "${username} ?: '값이 없습니다.'">
	결과값은 "값이 없습니다." 입니다.
</p>

---

날짜 ( #dates )

• Date 객체를 날짜 형식으로 변경

Date dates = new Date(); //Date 객체생성 (2019-12-01 12:05:17 기준)

<p th:text = "${dates.format(date, 'yyyy/MM/dd HH:mm:ss')}">
	결과 값은 "2019/12/01 12:05:17" 입니다.
</p>

<p th:text = "|${dates.day(date)}일|">결과값은 "1일" 입니다.</p>

<p th:text = "|${dates.month(date)}월|">결과값은 "12월" 입니다.</p>

<p th:text = "${dates.monthname(date)}">결과값은 "12월" 입니다.</p>

<p th:text = "|${dates.year(date)}년|">결과값은 "2019년" 입니다.</p>

---

수치 표현 ( #numbers )

• 정수값을 표현할 때는 #numbers.formatInteger 사용
• 부동소수점을 표현할 때는 #numbers.formatDecimal 사용

<p th:text = "${#numbers.froematInteger(1000000, 3, 'COMMA')}">
	결과 값은 "1,000,000" 입니다.
</p>

<p th:text = "${#numbers.froematDecimal(12345.678, 3, 'COMMA', 2, 'POINT')}">
	결과 값은 "12,345.68" 입니다.
</p>

---

반복 처리 ( th:each )

• java에서 for문과 비슷하다.

List<UserInfo> userInfo= new ArrList<>();
userInfo.add(new UserInfo ("user01", "pass01", 22));
userInfo.add(new UserInfo ("user02", "pass02", 11));
userInfo.add(new UserInfo ("user03", "pass03", 42));
userInfo.add(new UserInfo ("user04", "pass04", 23));

model.addAttribute("userInfo", userInfo);

<div th:each="item stat:${userInfo}">
	<p th:text="${stat.index}"> 0부터 시작하는 index </p>
	<p th:text="${stat.count}"> 1부터 시작하는 index </p>
	<p th:text="${stat.userId}"> userId 출력 </p>
	<p th:text="${stat.userPass}"> userPass 출력 </p>
	<p th:text="${stat.userAge}"> userAge 출력 </p>
</div>

//이외
//size - 리스트의 size
//current - 현재 index 변수
//event , odd - 짝수 홀수 여부
//first , last - 처음 마지막 여부

---