🎗 타임리프(Thymeleaf) 특징
1. 네츄럴 템플릿이다.
네츄럴 템플릿이란?
- 순수한 HTML을 최대한 보존하려는 특징이 있다.
- 간혹 타임리프와 JSP의 차이점을 모르는 경우가 허다한데 큰차이점은 네츄럴 템플릿이냐 아니냐의 차이이다.
- 타임리프로 HTML을 구성하면 웹브라우저로 파일을 열어도 깨끗한 HTML을 볼 수 있다.
- JSP로 HTML을 구성하면 웹브라우저로 파일을 열면 뒤죽박죽 섞여 알 수 없는 HTML을 볼 수 있다.2. 서버 사이드 랜더링(SSR)
3. 스프링 통합지원
🧧 타임리프 기본기능
🎀 텍스트 - text
th:text="${example}"
- html 태그 옆에 th:text 라고 붙이고
${}를 사용한다.- 예시)
<span th:text="${example}">,<p th:text="${example}"- 코드)
<li>th:text 사용 <span th:text="${example}"></span></li>
[[${example}]]
- 컨텐츠 안에서 직접 출력할 수 있다.
<li>컨텐츠 안에서 직접 출력 = [[${example}]]</li>
[(${example})]
model.addAttribute("data", "Hello <b>Spring!</b>");라고 model을 세팅하고 싶을 때,[[${example}]]을 사용하게 되면<b></b>태그가 그대로 노출되게 된다.
하지만,[(${example})]를 사용하게 되면<b></b>가 잘 적용되는 것을 볼 수 있다.
🎏 SpringEL 표현식
@Data public class User{ private String username; private int age; public User(String username, int age){ this.username = username; this.age = age; } }위와 같은
User객체가 있다고 가정했을 때 아래와 같은 타임리프(Thymeleaf) 문법을 사용할 수 있다.Object(객체)
${user.username} = userA
${user['username']} = userA
${user.getUsername()} = userA
List
${users[0].username} = userA
${users[0]['username']} = userA
${users[0].getUsername()} = userA
Map
${userMap['userA'].username} = userA
${userMap['userA']['username']} = userA
${userMap['userA'].getUsername()} = userA
지역변수
지역변수는 잘 사용하지 않을 것 같아 따로 정리는 하지 않았다.
🎁 파라미터 기본객체
※ 스프링 3.0 이상부터
request,response등을${# ~ }으로 꺼낼 수 없다고 한다.
<li>locale = <span th:text="${#locale}"></span></li>
위와 같이locale같은 경우${#locale}과 같이 편하게 꺼낼 수 있다.
편의기능
${param.paramData}
URL:http://localhost:8080/basic/basic-objects?paramData=HelloParam
위와 같이 파라미터 값인paramData를 꺼내고 싶다면${param.paramData}으로 간편하게HTML에서 꺼낼 수 있다.${session.sessionData}
session.setAttribute("sessionData", "Hello Session");
위와 같이 세팅해놓은 세션 값도${session.sessionData}을 사용하여HTML에서 꺼낼 수 있다.${@helloBean.hello('Spring!')}
@Component("helloBean") static class HelloBean{ public String hello(String data){ return "Hello "+data; } }
- 다음과 같은
@Component또한@를 사용하여,${@helloBean.hello('Spring!')}를 사용하여 활용할 수 있다.결과 : HTML에의 표기
👚 날짜
@GetMapping("/date") public String date(Model model) { model.addAttribute("localDateTime", LocalDateTime.now()); return "basic/date"; }위와 같이
@Controller를 작성했을 때,localDateTime을 다음과 같이Thymeleaf에서 사용할 수 있다.<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>LocalDateTime</h1> <ul> <li>default = <span th:text="${localDateTime}"></span></li> <li>yyyy-MM-dd HH:mm:ss = <span th:text="${#temporals.format(localDateTime,'yyyy-MM-dd HH:mm:ss')}"></span></li> </ul> <h1>LocalDateTime - Utils</h1> <ul> <li>${#temporals.day(localDateTime)} = <span th:text="${#temporals.day(localDateTime)}"></span></li> <li>${#temporals.month(localDateTime)} = <span th:text="${#temporals.month(localDateTime)}"></span></li> <li>${#temporals.monthName(localDateTime)} = <span th:text="${#temporals.monthName(localDateTime)}"></span></li> <li>${#temporals.monthNameShort(localDateTime)} = <span th:text="${#temporals.monthNameShort(localDateTime)}"></span></li> <li>${#temporals.year(localDateTime)} = <span th:text="${#temporals.year(localDateTime)}"></span></li> <li>${#temporals.dayOfWeek(localDateTime)} = <span th:text="${#temporals.dayOfWeek(localDateTime)}"></span></li> <li>${#temporals.dayOfWeekName(localDateTime)} = <span th:text="${#temporals.dayOfWeekName(localDateTime)}"></span></li> <li>${#temporals.dayOfWeekNameShort(localDateTime)} = <span th:text="${#temporals.dayOfWeekNameShort(localDateTime)}"></span></li> <li>${#temporals.hour(localDateTime)} = <span th:text="${#temporals.hour(localDateTime)}"></span></li> <li>${#temporals.minute(localDateTime)} = <span th:text="${#temporals.minute(localDateTime)}"></span></li> <li>${#temporals.second(localDateTime)} = <span th:text="${#temporals.second(localDateTime)}"></span></li> <li>${#temporals.nanosecond(localDateTime)} = <span th:text="${#temporals.nanosecond(localDateTime)}"></span></li> </ul> </body> </html>
🔮 타임리프에서 자바스크립트 인라인(inline)하기
<script th:inline>을 통해 사용가능하다.
-<script th:inline>하는 이유 : 타임리프의 여러 값들을 자바스크립트에 맞게 변환을 해준다.- 더 자세한 타임리프의 편의기능 및 사항들은 교육자료의 PDF파일을 참고할 것
🎟 더 자세한 타임리프
주니어 개발자를 꿈꾸는 12hugs입니다.