[Spring Boot] Thymeleaf 기본 문법 정리

백엔드/Spring-boot

[Spring Boot] Thymeleaf 기본 문법 정리

🪄하루🪄 2023. 7. 29. 20:47

728x90

0. Thymeleaf 란?

컨트롤러가 전달하는 데이터를 이용해 동적으로 화면을 만들어주는 역할을 하는 뷰 템플릿 엔진

1. 사용

html 파일에 코드 삽입 후 사용

<html xmlns:th="http://www.thymeleaf.org">

2. 기본 문법

1) 텍스트 출력

컨트롤러에서 model.setAttribute("변수명", "값") 부분의 값을 출력

태그 안에서 출력 < 태그명 th:"text=${변수명}" >
컨텐츠에서 직접 출력 [[${변수}]]

cf) 익스케이프(escape)

특정 문자를 HTML로 변환하는 행위

값 부분의 < > 등의 특수 문자열을 <(&lt), >(&rt) 띄어쓰기(&nbsp) 기호로 변환하여 인식하게 하는 것을 '이스케이프(escape)'라고 한다.

Q : 그렇다면 값에 <태그> 를 인식하게 하려면 어떻게 해야 할까?

A : 익스케이프 기능을 사용하지 않도록 한다.

태그 안에서 출력 <태그명 th:utext "${변수명}">
콘텐츠에서 직접 출력 [(${변수})]

Q : 이스케이프 처리를 기본으로 사용하는 이유는?

A : 사용자의 입력을 받아 동적으로 페이지를 구성할 때, 여러 특수문자들 때문에 html 페이지가 깨질 수 있기 때문이다.

2) Spring EL

스프링 표현 언어

객체의 속성 값에 접근

${user.username}

${user['username']}

${user.getUsername()}

List와 HashMap도 해당 객체에 접근한 뒤, 객체에서 값에 접근하는 방법과 동일하게 사용할 수 있다.

List<객체> List[index]
Map<key, 객체> Map[key]

3) 지역변수

선언된 태그 내에서만 사용 가능

<태그명 th.with="지역변수명"={$변수명}">

4) 제공하는 객체

- 기본 객체

${#request}
${#response}
${#session}
${#servletContext}
${#locale}

- 편의객체

"${param.paramData} http 주소?paramData=값 부분의 값을 출력한다.

세션 데이터에 접근 "${session.sessionData}"
스프링 빈 데이터에 접근 "${@스프링빈등록이름.메소드명(매개변수)}"

5) 유틸리티 객체

이런 기능이 있다 정도만 확인하고 자세한 사항은 홈페이지 공식 매뉴얼을 참조하여 필요할 때 사용하자.

메시지 처리 &{#message}
URI 이스케이프 지원 ${#uris}
java.util.Date 서식 지원 ${#dates}
java.util.Calendar 서식 지원 ${#calendars}
자바 8 날짜 서식 지원 ${#temporals}
숫자 서식 지원 &{#numbers}
문자 관련 편의 기능 ${#strings}
객체 관련 기능 제공 ${#objects}
boolean 관련 기능 제공 ${#bools}
배열 관련 기능 제공 ${#arrays}
컬렉션 관련 기능 제공 &{#lists}, &{#sets}, &{#maps}
아이디 처리 관련 기능 제공, 뒤에서 설명 ${#ids}
날짜용 유틸리티 객체 ${#temporals}

Tutorial: Using Thymeleaf

1 Introducing Thymeleaf 1.1 What is Thymeleaf? Thymeleaf is a modern server-side Java template engine for both web and standalone environments, capable of processing HTML, XML, JavaScript, CSS and even plain text. The main goal of Thymeleaf is to provide a

www.thymeleaf.org

6) URL 링크

<태그명 th:href=" @{http주소 ~ }">

~ 부분은 경로변수, 쿼리 파라미터, 경소변수+쿼리 파라미터로 구성

경로변수 (http 주소?param1=data1&param2=data2)

@{http 주소(param1=${param1}, param2=${param2})}

쿼리 파라미터 (http 주소/data1/data2)

@{http 주소/{param1}/{param2}(param1=${param1}, param2=${param2})}

경로변수+쿼리 파라미터 (http 주소/data1/data2?param3=data3)

@{http 주소/{param1}/{param2}(param3=${param3})}

7) 리터럴

소스코드상의 고정된 값

문자 : 원칙) 작은따옴표로 감싸야함(' 문자 ') 예외) 연속적으로 이어진 문자라면 생략 가능하다
숫자
Boolean : true, false
Null : null

8) 연산

다른 연산과 동일한데 특정 특수문자만 주의하여 사용하자

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

9) 조건문

주로 8번의 연산과 함께 사용되며 if와 unless와 switch 문장이 있고 조건을 만족하지 않으면 해당 태그의 출력이 제한된다.

.html

<th:if="조건">

<th:unless="조건">

<th:switch="조건값">

<th:case="값 1">

<th:case="값 2">

<th:case="*"> //default(조건이 없을 때 사용)

10) 속성값 설정

속성 생성/대체 <태그명 th:속성명="값"> : 해당 속성명이 존재하지 않으면 새로 만들어 값을 저장하고, 속성명이 존재하면 해당 값으로 대체한다.

속성 추가

뒤에 추가

.html

<태그명 태그속성이름1="값1" th:attrappend="태그속성이름1=값2">

결과

태그속성이름1=값1값2

앞에 추가

.html

<태그명 태그속성이름1="값1" th:attrprepend="태그속성이름1=값2">

결과

태그속성이름1=값2값1

그 외) classappend : 띄어쓰기를 하지 않아도 자연스럽게 추가한다.

.html

<태그명 태그속성이름1="값1"th:classappend="태그속성이름1=값2">

결과

태그속성이름1=값1 값2

사용 예제

html파일에서 <input type="check box" name="active" checked="false">

이 경우 cheked라는 속성이 있기 때문에 체크 처리가 되어버린다.

하지만, 속성값 대체를 이용하여 check가 되었을 때만 처리를 한다.

11) 반복문

Iterable, Enumeration 객체의 원소들을 출력할 때 추로 사용

.html

<th:each="태그속성이름1 : ${객체변수이름}">

<th:태그속성이름2="{태그속성이름1.속성1}">

현재 속성 확인 userStat

인덱스 확인(0부터) : userStat.index
현재 몇 번째 반복인지 확인(1부터) : userStat.count
전체 반복 횟수(객체의 사이즈) 확인 : userStat.size
반복의 홀수 짝수 확인(boolean) : userStat.odd, userStat.even
반복의 첫 번째와 마지막 확인(boolean) : userStat.first, userStat.last
현재 객체 확인 : userStat.current

12) 주석

모든 주석은 .html 파일로 보면 주석처리 된 채로 보인다.

표준 html 주석

웹 브라우저가 랜더링 하지 않고 + 타임리프가 랜더링(서버사이드 랜더링시 주석코드를 없애지 않는다) 하지도 않는다

주석 코드는 html상에 그대로 존재하게 둔다.

타임리프 파서 주석

웹 브라우저가 랜더링 하지 않고 + 타임리프가 랜더링(서버사이드 랜더링 시 주석 코드를 없앤다) 한다.

주석 코드는 html 상에 보이지 않는다.

타임리프 프로토타입 주석

웹 브라우저가 랜더링 하지 않고 +서버사이드 랜더링 시 타임리프로 랜더링 된 경우에만 주석을 제거하고 화면에서 출력한다.

주석 코드는 주석이 제거되어 결과가 html 상에 존재하게 된다.

<!-- /*/

블록 코드

/*/ -->

대부분) 2번 방법으로 주석을 사용한다.

13) 자체태그 블록

타임리프 특성상 html의 속성으로 기능을 정의해서 사용하는데, 태그로써 기능을 정의해서 사용하고 싶은 경우 다음과 같이 사용한다.

.html

<th:block th:each="태그속성이름1 : ${객체변수이름}">

<태그명 ~>

14) 자바스크립트와 타임리프

1. 텍스트 랜더링

텍스트 랜더링시 따옴표를 붙여야 하거나, 특수문자 등을 따로 처리해야 한다.

.js

user.username="user A"라고 할 때

var name=[[${user.username}]] 으로 바로 사용할 수 없고

var name= "[[${user.username}]]"으로 타입에 맞추어 사용하여야 한다.

2. 내추럴 템플릿 사용 X

.js

var username= /*[[$user.username]] */ "test username"

주석이 제거되지 않고 해당 문장을 그대로 실행한다.

결과

username= /*[[$user.username]] */ "test username"

3. 객체 사용 시 불편함

.js

username=객체 를 할당했을 때

다음과 같이 할당된다.

결과

username=Controller이름.객체클래스(객체속성=객체값);

자바스크립트 인라인

위의 문제들은 타임리프 기능을 간편하게 사용 수 있도록 하는 자바스크립트 인라인을 사용하여 해결할 수 있다.

<script th:inline="javascript">

1. 텍스트 랜더링

타입을 신경 쓰지 않아도 되고, 특수문자의 처리의 경우도 자동으로 처리된다.

.js

var name= [[${user.username}]]

2. 내추럴 템플릿 사용 O

주석이 제거되어 해당 문장이 실행된다.

결과

username= "test username"

3. 객체 json 할당

자동으로 json 형식으로 변환하여 값을 할당한다.

결과

username={객체속성 : 객체값}

4. 반복문

each 문법은 다음과 같이 사용한다.

.js

[# th:each 문법 그대로 사용]

15) 공통된 템플릿 사용

웹 페이지의 특정 html이 반복되어 나타나는 경우 템플릿을 조각내어 사용한다.

템플릿 조각

[resources]-[template]-[fragment] 폴더에 조각낸 html 파일을 저장한다.

조각낸 템플릿은 함수와 비슷한 형식으로 불러와서 사용한다.

.html

파라미터가 필요하지 않은 템플릿

<템플릿 태그명 th:fragment="템플릿 이름"> 내용 </템플릿 태그명>

파라미터가 포함된 템플릿

<템플릿 태그명 th:fragment="템플릿 이름 (파라미터 1, 파라미터 2)"> </템플릿 태그명>

html의 특정 부분에 템플릿 조각 사용(삽입, 대체)

파라미터로 단순 값을 사용

.html

<태그명 1 : insert/replace "~{경로 :: 템플릿 이름(파라미터 값)}"></태그명>

insert : 해당 태그 안에 템플릿을 사용

<태그명 1><템플릿 태그명> 내용 </템플릿 태그명></태그명 1>

replace : 해당 태그를 템플릿의 태그로 대체

<템플릿 태그명> 내용 </템플릿 태그명>

파라미터로 특정 태그를 사용

<태그명 1 : insert/replace "~{경로 :: 템플릿 이름( ~{::대체태그 1}, ~{대체태그 2})}">

<대체태그 1>

<대체태그 2></대체태그 2>

</대체태그 1>

</태그명 1>

결과

템플릿 이름의 코드가 대체태그 속성의 값으로 대체되어 랜더링 된다.

html 자체를 레이아웃으로 대체

<html : insert/replace "~{경로 :: 템플릿 이름( ~{::대체태그1}, ~{대체태그2})}">

<대체태그 1>

<대체태그 2></대체태그 2>

</대체태그 1>

</태그명 1>

Q 왜 레이아웃을 사용할까?

레이아웃을 사용하면, 내용(제목, 콘텐츠 부분)은 보호하고 바뀐 부분만 동적으로 할당이 가능하다.(footer등을 일괄적으로 바꾸는 등)

페이지가 많은 경우 사용하기 유리하다.(유사한 페이지가 많은 경우 사용하자. ex 일기장 등)

728x90

저작자표시 비영리 변경금지

'백엔드 > Spring-boot' 카테고리의 다른 글

[Intellij] AWS RDS 연결/사용하기 (1)	2023.11.25

현재글[Spring Boot] Thymeleaf 기본 문법 정리

Today :
Yesterday :

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28