타임리프 사용 -> 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¶m2=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" />
'thymeleaf' 카테고리의 다른 글
| Thymeleaf 기본 기능 및 문법 - 2 (1) | 2023.11.23 |
|---|
댓글