타임리프 (Thymeleaf)
타임리프는 컨트롤러가 전달하는 데이터를 이용해 동적으로 화면을 만들어주는 역할을 하는 뷰 템플릿 엔진이다.
타임리프 특징
서버 사이드 HTML 렌더링 (SSR)
- 타임리프는 백엔드 서버에서 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): -
- 불린 연산
- 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: _
* 리터럴 작성시 주의사항
<span th:text="hello world!"></span> X
<span th:text="'hello world!'"></span> O
문자 리터럴은 원칙상 ' '로 감싸야 한다. 중간에 공백이 있어 하나의 의미있는 토큰으로도 인식되지 않는다.
* 리터럴 대체
<span th:text="|hello ${data}|">
마지막의 리터럴 대체 문법을 사용하면 마치 템플릿을 사용하는 것처럼 편리하다.
텍스트
HTML의 콘텐츠(content)에 테이터를 출력할 때는 th:text를 사용한다.
☞ <span th:text="${data}">
HTML 태그의 속성이 아니라 HTML 컨텐츠 영역 안에서 직접 데이터를 출력하고 싶으면 [[. . .]]을 사용한다
☞ [[${data}]]
타임리프 유틸리티 객체들
#message : 메시지, 국제화 처리
#uris : URI 이스케이프 지원
#dates : java.util.Date 서식 지원
#calendars : java.util.Calendar 서식 지원
#temporals : 자바8 날짜 서식 지원
#numbers : 숫자 서식 지원
#strings : 문자 관련 편의 기능
#objects : 객체 관련 기능 제공
#bools : boolean 관련 기능 제공
#arrays : 배열 관련 기능 제공
#lists , #sets , #maps : 컬렉션 관련 기능 제공
#ids : 아이디 처리 관련 기능 제공, 뒤에서 설명
반복
- 타임리프에서 반복은 th:each를 사용한다.
- <tr th:each="user : ${users}">
- th:each는 List뿐만 아니라 배열 java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있다.
if, unless
- 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않는다.
- 만약 다음 조건이 false인 경우 <span>. . .</span> 부분 자체가 렌더링 되지 않고 사라진다.
- <span th:text="'미성년자'" th:if="${user.age lt 20}">
'Spring Study > MVC 패턴' 카테고리의 다른 글
| [MVC 패턴] 메시지, 국제화 (0) | 2023.08.22 |
|---|---|
| [MVC 패턴] 타임리프 (Thymeleaf) - 스프링 통합과 폼 (0) | 2023.08.18 |
| [MVC 패턴] MVC 기본 기능 (0) | 2023.08.15 |
| [MVC 패턴] MVC 구조 (0) | 2023.08.14 |
| [MVC 패턴] MVC 프레임워크 만들기 (0) | 2023.08.12 |
댓글