타임리프 - 기본기능

meluu_·2024년 1월 12일

Thymeleaf

스프링

목록 보기

16/27

🌿 타임리프

타임리프 특징

서버 사이드 HTML 렌더링 (SSR)
네츄럴 템플릿
스프링 통합 지원

타임리프 사용 선언
<html xmlns:th="http://www.thymeleaf.org">

기본 표현식

• 간단한 표현:
	◦ 변수 표현식: ${...}
	◦ 선택 변수 표현식: *{...}
	◦ 메시지 표현식: #{...}
	◦ 링크 URL 표현식: @{...}
	◦ 조각 표현식: ~{...}

• 리터럴
	◦ 텍스트: 'one text', 'Another one!',…
	◦ 숫자: 0, 34, 3.0, 12.3,…
	◦ 불린: true, false
	◦ 널: null
	◦ 리터럴 토큰: one, sometext, main,…

• 문자 연산:
	◦ 문자 합치기: +
	◦ 리터럴 대체: |The name is ${name}|

• 산술 연산:
	◦ Binary operators: +, -, *, /, %
	◦ Minus sign (unary operator): -

• 불린 연산:
	◦ Binary operators: and, or
	◦ Boolean negation (unary operator): !, not

• 비교와 동등:
	◦ 비교: >, <, >=, <= (gt, lt, ge, le)
	◦ 동등 연산: ==, != (eq, ne)

• 조건 연산:
	◦ If-then: (if) ? (then)
	◦ If-then-else: (if) ? (then) : (else)
	◦ Default: (value) ?: (defaultvalue)

• 특별한 토큰:
	◦ No-Operation: _

✔️텍스트 - text, utext

HTML 태그의 속성이 아닌 콘텐츠 영역에 직접 데이터 출력
1. [[${data}]] : escape 지원 (HTML 엔티티)
2. [(${data})] : Unescape

th:text : escape
th:utext : Unescape

✔️ 변수 - SpringEL

//일반 변수 
${data.id}
${data['id']}
${data.getId()}

// List
${data[0].id}
${data[0]['id']}
${data[0].getId()}

//map
${data[userA].id}
${data[userA]['id']}
${data[userA].getId()}

지역변수

<h1> 지역 변수 - (th:with)</h1>
<div th:with="frist=${users[0]}">
  ${first.id} 이런식으로 사용

✔️ 기본 객체들

타임리프는 기본 객체들을 제공한다.
${#request}
${#response}
${#session}
${#servletContext}
${#locale}

스프링 부트 3.0부터 지원안하는 객체가 많기에
컨트롤러에서 model에 따로 넣어서 사용해야한다.

편의 객체

HTTP 요청 파라미터 접근 : param
${param.paramData}

HTTP 세션 접근 : session
${session.sessionData}

스프링 빈 접근 : @
${@helloBean.hello('Spring!')}

✔️ 유틸리티 객체와 날짜

#message : 메시지, 국제화 처리
#uris : URI 이스케이프 지원
#dates : java.util.Date 서식 지원
#calendars : java.util.Calendar 서식 지원
#temporals : 자바8 날짜 서식 지원
#numbers : 숫자 서식 지원
#strings : 문자 관련 편의 기능
#objects : 객체 관련 기능 제공
#bools : boolean 관련 기능 제공
#arrays : 배열 관련 기능 제공
#lists , #sets , #maps : 컬렉션 관련 기능 제공
#ids : 아이디 처리 관련 기능 제공, 뒤에서 설명

자세한 사용법은 교재 참고

✔️ URL 링크

1. 단순 URL 
@{/home} -> /home

2. 쿼리 파라미터
@{/home(param1=${param1}, param2=${param2}}
-> /home?param1=data1&param2=data2

3. 경로 변수 + 쿼리 파라미터
@{/home/{param1}(param1=${param1}, param2=${param2})}
-> /home/data1?param2=data2

경로상에 변수가 있으면 ()부분은 변수로 처리

/home : 절대경로
home : 상대경로

✔️ 리터럴

리터럴 : 소스 코드상에 고정된 값

String a = "hello"
int a = 10 * 20

"hello"는 문자 리터럴 , 10, 20 은 숫자 리터럴

타임리프 리터럴

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

타임리프에서 문자 리터럴은 항상 '(작은 따음표)로 감싸야함

th:text="hello world!" : 중간에 공백으로 하나의 의미있는 토큰 인식 x

th:text="'hello world!'" : 정상 작동

리터럴 대체

th:text="|hello ${data}|" 
작은 따옴표로 감싸지 않아도 사용 가능

✔️ 연산

// 산술 연산은 같다.
th:text="1 + 2"
th:text="10 % 2 == 0" 

// 비교 연산
th:text="1 gt 10"  // 1 > 10
th:text="1 >= 10"  
th:text="1 ge 10"  // 1 >= 10
th:text="1 == 10"
th:text="1 != 10"
// &gt; 이렇게 해도 잘 작동한다. 

// 조건식
th:text="(10 % 2 == 0) ? '짝수' : '홀수'"

//Elvis 연산자
// 데이터가 있다면, null 이 아니라면 데이터 출력
// 없다면, null이라면 '데이터가 없습니다. ' 출력
th:text="${data}? : '데이터가 없습니다.'"

//No-Operation
// null, 데이터가 없다면 th부분이 무시된다고 보면 된다.
// html 그대로 출력
<span>th:text="${data}?:_"> 데이터가 없습니다. </span>

✔️ 속성 값 설정

th:xxx : 기존 html 속성으로 설정

// 속성 추가
th:attrappend : 속성 값의 뒤에 값 추가
th:attrprepend : 속성 값의 앞에 값 추가
th:classappend : class 속성에 자연스럽게 추가

checked 처리

HTML에서 checked 속성은 값과 상관없이 속성이 있기만 하면 체크된다.
타임리프의 th:checked는 값이 false인 경우 checked 속성 자체를 제거

✔️ 반복

반복 사용

<tr th:each="user : ${users}">

// List, 배열, java.util.Iterable , java.util.Enumeration 을 구현한 
모든 객체를 반복에 사용
// Map 은 변수에 담기는 값이 Map.Entry

반복 상태 유지

<tr th:each="user, userStat : ${users}">
 ex) ${user.id} 사용

반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 가능
두번째 파라미터 생략 가능
- 지정한 변수명 (user) + Stat

반복 상태 유지 기능


index : 0부터 시작하는 값
count : 1부터 시작하는 값
size : 전체 사이즈
even , odd : 홀수, 짝수 여부( boolean )
first , last :처음, 마지막 여부( boolean )
current : 현재 객체

// 사용
${userStat.count} 
${userStat.size} 
이런식으로 사용

✔️ 조건부 평가

if, unless (if 반대)

th:if="${user.age lt 20}"
th:unless="${user.age ge 20}"

switch

<td th:switch="${user.age}">
 <span th:case="10">10살</span>
 <span th:case="20">20살</span>
 <span th:case="*">기타</span>
 </td>

✔️ 주석

<h1>예시</h1>
<span th:text="${data}">html data</span>
<h1>1. 표준 HTML 주석</h1>
<!--
<span th:text="${data}">html data</span>
-->

<h1>2. 타임리프 파서 주석</h1>
<!--/* [[${data}]] */-->

<!--/*-->  // 여러줄 처리
<span th:text="${data}">html data</span>
<!--*/-->

<h1>3. 타임리프 프로토타입 주석</h1>
<!--/*/
<span th:text="${data}">html data</span>
/*/-->

그대로 남음
타임리프 렌더링시 주석 부분 제거
타임리프 렌더링시 주석부분 실행 , HTML로 열었을 때는 주석 남음

✔️ 블록

<th:block th:each="user : ${users}">
	<div>
 		사용자 이름1 <span th:text="${user.username}"></span>
 		사용자 나이1 <span th:text="${user.age}"></span>
 	</div>
 	<div>
 		요약 <span th:text="${user.username} + ' / ' + ${user.age}"></span>
 	</div>
</th:block>

<th:block> 은 렌더링시 제거

✔️ 자바스크립트 인라인

<script th:inline="javascript">

<!-- 자바스크립트 인라인 사용 전 -->
<script>
	var username = [[${user.username}]];
	var age = [[${user.age}]];
	//자바스크립트 내추럴 템플릿
	var username2 = /*[[${user.username}]]*/ "test username";
	//객체
	var user = [[${user}]];
</script>

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
	var username = [[${user.username}]];
	var age = [[${user.age}]];
	//자바스크립트 내추럴 템플릿
	var username2 = /*[[${user.username}]]*/ "test username";
	//객체
	var user = [[${user}]];
</script>

자바스크립트 인라인 사용 전 - 결과
<script>
	var username = userA;
	var age = 10;
	
    //자바스크립트 내추럴 템플릿
	var username2 = /*userA*/ "test username";
	
    //객체
	var user = BasicController.User(username=userA, age=10);
</script>

자바스크립트 인라인 사용 후
<script>
	var username = "userA";
	var age = 10;
	
    //자바스크립트 내추럴 템플릿
	var username2 = "userA";
	
    //객체
	var user = {"username":"userA","age":10};
</script>

텍스트 렌더링
- 변수 이름이면 " 문자 처리를 해준다.
- 이스케이프 처리도 해준다.

자바스크립트 내추럴 템플릿
- 주석 기능 활용

객체
- 객체를 JSON으로 자동 변환

자바스크립트 인라인 each

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
	[# th:each="user, stat : ${users}"]
	var user[[${stat.count}]] = [[${user}]];
	[/]
</script> 

자바스크립트 인라인 each 결과 
<script>
	var user1 = {"username":"userA","age":10};
	var user2 = {"username":"userB","age":20};
	var user3 = {"username":"userC","age":30};
</script>