Thymeleaf(타임리프) 기본 기능 및 문법

thymeleaf

Thymeleaf(타임리프) 기본 기능 및 문법 - 1

devstep88 2023. 11. 23. 18:48

타임리프 사용 -> thymeleaf 라이브러리 설치

타임리프 사용 선언

<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 테그의 속성이 아닌 HTML 콘텐츠 영역안에서 직접 데이터를 출력하고 싶으면 다음과 같이 [[...]] 를 사용하면 된다.

<li>컨텐츠 안에서 직접 출력하기 = [[${data}]]</li>

타임리프는 기본적으로 escape를 지원하고 Unescape 하려면 utext, [(...)]를 사용한다.

th:inline="none" -> 타임리프는 [[...]] 를 해석하기 때문에, 화면에 [[...]] 글자를 보여줄 수 없다. 이 태그 안에서는 타임리프가 해석하지 말라는 옵션이다

변수 - springEL

변수 표현식 = ${...}

SpringEL 다양한 표현식 사용

Object

user.username : user의 username을 프로퍼티 접근 -> user.getUsername()

user['username'] : 위와 같음 -> user.getUsername()

user.getUsername() : user의 getUsername() 을 직접 호출

List

users[0].username : List에서 첫 번째 회원을 찾고 username 프로퍼티 접근 -> list.get(0).getUsername()

users[0]['username'] : 위와 같음

users[0].getUsername() : List에서 첫 번째 회원을 찾고 메서드 직접 호출

Map

userMap['userA'].username : Map에서 userA를 찾고, username 프로퍼티 접근 -> map.get("userA").getUsername() userMap['userA']['username'] : 위와 같음

userMap['userA'].getUsername() : Map에서 userA를 찾고 메서드 직접 호출

지역변수 선언

th:with를 사용하면 지역 변수를 선언해서 사용할 수 있다. 지역 변수는 선언한 테그 안에서만 사용할 수 있다

<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
 <p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>

기본 객체들

타임리프는 다음과 같은 기본 객체들을 제공했다. -> 스프링 부트 3.0부터 제공하지 않음

${#request} - 스프링 부트 3.0부터 제공하지 않는다.

${#response} - 스프링 부트 3.0부터 제공하지 않는다.

${#session} - 스프링 부트 3.0부터 제공하지 않는다.

${#servletContext} - 스프링 부트 3.0부터 제공하지 않는다.

${#locale}

스프링 부트 3.0이라면 직접 model 에 해당 객체를 추가해서 사용해야 한다.

그런데 ${#request} 는 HttpServletRequest 객체가 그대로 제공되기 때문에 데이터를 조회하려면 request.getParameter("data") 처럼 불편하게 접근해야 했다.

이런 점을 해결하기 위해 편의 객체도 제공한다.

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 : 아이디 처리 관련 기능 제공, 뒤에서 설명

자바8 날짜

타임리프에서 자바8 날짜인 LocalDate , LocalDateTime , Instant 를 사용하려면 추가 라이브러리가 필요하다.

스프링 부트 타임리프를 사용하면 해당 라이브러리가 자동으로 추가되고 통합된다.

타임리프 자바8 날짜 지원 라이브러리 = thymeleaf-extras-java8time

자바8 날짜용 유틸리티 객체 = #temporals

사용예시

<span th:text="${#temporals.format(localDateTime, 'yyyy-MM-dd HH:mm:ss')}"></span>

URL 링크

타임리프에서 URL을 생성할 때는 @{...} 문법을 사용하면 된다.

단순한 URL -> @{/hello} /hello

쿼리 파라미터

@{/hello(param1=${param1}, param2=${param2})} -> /hello?param1=data1&param2=data2

() 에 있는 부분은 쿼리 파라미터로 처리된다.

경로 변수

@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})} -> /hello/data1/data2

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

경로 변수 + 쿼리 파라미터

@{/hello/{param1}(param1=${param1}, param2=${param2})} -> /hello/data1?param2=data2

경로 변수와 쿼리 파라미터를 함께 사용할 수 있다. 상대경로, 절대경로, 프로토콜 기준을 표현할 수 도 있다.

/hello : 절대 경로

hello : 상대 경로

리터럴 - 소스 코드 상 고정되어 있는 값

타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다.

<span th:text="'hello'">

그런데 문자를 항상 ' 로 감싸는 것은 너무 귀찮은 일이다. 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이 작은 따옴표를 생략할 수 있다.

// 룰: A-Z , a-z , 0-9 , [] , . , - , _

<span th:text="hello">

리터럴 대체 (Literal substitutions)

<span th:text="|hello ${data}|">

마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것 처럼 편리하다.

연산

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

비교연산: HTML 엔티티를 사용해야 하는 부분을 주의하자

> (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)

조건식: 자바의 조건식과 유사하다.

Elvis 연산자: 조건식의 편의 버전

No-Operation: _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작한다. 이것을 잘 사용하면 HTML 의 내용 그대로 활용할 수 있다. 마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력된다.

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

속성(Attribute)

속성 설정

th:* 속성을 지정하면 타임리프는 기존 속성을 th:* 로 지정한 속성으로 대체한다.

기존 속성이 없다면 새로 만든다.

<input type="text" name="mock" th:name="userA" />

타임리프 렌더링 후

<input type="text" name="userA" />

속성 추가

th:attrappend : 속성 값의 뒤에 값을 추가한다.

th:attrprepend : 속성 값의 앞에 값을 추가한다.

th:classappend : class 속성에 자연스럽게 추가한다.

checked 처리

HTML에서는

<input type="checkbox" name="active" checked="false" />

이 경우에도 checked 속성이 있기 때문에 checked 처리가 되어버린다.

HTML에서 checked 속성은 checked 속성의 값과 상관없이 checked 라는 속성만 있어도 체크가 된다. 이런 부분이 true , false 값을 주로 사용하는 개발자 입장에서는 불편하다.

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

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

타임리프 렌더링 후:

<input type="checkbox" name="active" />