※ 타임리프 특성
- 타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링 하는 용도로 사용
- 타임리프는 순수 HTML을 최대한 유지하는 특징이 있음
> 웹브라우저에서 파일을 직접 열어도 내용을 확인 할 수 있음 (jsp와 다름)
> 순수 HTML을 그대로 유지하면서 뷰 템플릿도 사용할 수 있는 네츄럴 템플릿
-> 네츄럴 템플릿 : HTML을 직접 열어도 동작함
- 스프링과 너무 잘 어울림
HTML 에서 선언
<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): -텍스트 출력
- th:text="${data}" 나 [[${data}]] 사용
- 자동으로 특수문자 (<, >,..) 를 HTML entity 구별하여 escape 처리가 됨
- escape 하지 않으려면 th:utext="${data}" or [(${data})] 사용
지역 변수 선언
- th:with를 사용하면 지연 변수를 선언해서 사용할 수 있다.
<h1>지역 변수 - (th:with)</h1>
<div th:with="first=${users[0]}">
<p>처음 사람의 이름은 <span th:text="${first.username}"></span></p>
</div>
타임리프가 제공하는 기본 객체들
${#request}
${#response}
${#session}
${#servletContext}
${#locale}
+) ${param.paramData} // http 요청 파라미터 접근
+) ${session.sessionData} // http 세션 접근
+) ${@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 링크
- 타임리프에서 URL을 생성할 때는 @{...} 문법을 사용
- 쿼리 파라미터
@{/hello(param1=${param1}, param2=${param2})}- 경로 변수
@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}- 경로 변수 + 쿼리 파라미터
@{/hello/{param1}(param1=${param1}, param2=${param2})}
※ 주의점
- 타임 리프에서 문자 리터럴은 항상 '(작은 따옴표)로 감싸야 한다.
> 편의상 공백이 없다면 작은 따옴표 생략 가능
> 잘못된 예시 ( 작은 따옴표가 없다 )
<span th:text="hello world!"></span>연산 관련
비교연산: HTML 엔티티를 사용해야 하는 부분을 주의하자,
> (gt), < (lt), >= (ge), <= (le), ! (not), == (eq), != (neq, ne)
조건식: 자바의 조건식과 유사하다.
Elvis 연산자: 조건식의 편의 버전
No-Operation: _ 인 경우 마치 타임리프가 실행되지 않는 것 처럼 동작한다.
이것을 잘 사용하면 HTML 의 내용 그대로 활용할 수 있다.
마지막 예를 보면 데이터가 없습니다. 부분이 그대로 출력된다.
<li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li>반복
- th:each="user : ${users}" 로 표현
- List 뿐만 아니라 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체에 사용 가능, Map 도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.entry
- 반복 상태 확인 관련 ( th:each="user, userStat : ${users}")
index : 0부터 시작하는 값
count : 1부터 시작하는 값
size : 전체 사이즈
even , odd : 홀수, 짝수 여부( boolean )
first , last :처음, 마지막 여부( boolean )
current : 현재 객체if, unless / 주석 / 블록
- 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다.
- <!-- --> , 표준 HTML 주석 : 자바스크립트의 표준 HTML 주석은 타임리프가 렌더링 하지 않고, 그대로 남겨둔다.
- <!--/* */-->, 타임리프 파서 주석 : 타임리프 파서 주석은 타임리프의 진짜 주석이다. 렌더링에서 주석 부분을 제거한다..
- <!--/*/ /*/-->, 타임리프 프로토타입 주석 : HTML 주석에 약간의 구문을 더함, 웹브라우저에서 열어보면 렌더링 하지 않음, 타임 리프 렌더링을 거치면 정상적으로 렌더링 됨
- th:block은 타임리프 유일한 태그 (타임리프에서만 사용 , 블록 단위로 each를 돌릴때 등)
inline 이란
- 사용법
<script th:inline="javascript">- 텍스트 렌더링 : 문자 타입인 경우 "를 포함해준다.
- escape : 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리도 해준다 ( ex) " -> \" )
- 네츄럴 템플릿 기능 적용
var username2 = /*[[${user.username}]]*/ "test username";
인라인 사용 전 var username2 = /*userA*/ "test username";
인라인 사용 후 var username2 = "userA";- 객체 자동 변환 ( toString() - > JSON )
var user = [[${user}]];
인라인 사용 전 var user = BasicController.User(username=userA, age=10);
인라인 사용 후 var user = {"username":"userA","age":10};템플릿 조각
- 부분 포함 insert
<div th:insert="~{template/fragment/footer :: copy}"></div>
- 부분 포함 replace
<div th:replace="~{template/fragment/footer :: copy}"></div>
- 부분 포함 단순 표현식
<div th:replace="template/fragment/footer :: copy"></div>
- 파라미터 사용
<div th:replace="~{template/fragment/footer :: copyParam ('데이터1', '데이터2')}"></
div>
'Spring' 카테고리의 다른 글
| [Spring] 스프링 DB 1편 - 데이터 접근 핵심 원리 - 2 (0) | 2022.09.18 |
|---|---|
| [Spring] 스프링 DB 1편 - 데이터 접근 핵심 원리 - 1 (0) | 2022.06.06 |
| [Spring] 실전! Querydsl - 3 (0) | 2021.09.13 |
| [Spring] 실전! Querydsl - 2 (0) | 2021.09.09 |
| [Spring] 실전! Querydsl - 1 (0) | 2021.09.09 |
