Thymeleaf 기본 문법

 

Author: 니용

 

오늘은 Thymeleaf를 사용하는 문법에 대해 글을 작성해보려 합니다.

Thymeleaf는 템플릿 엔진이라고 하여 웹페이지 내에서 html 태그만을 사용하여 화면을 그려주는 용도로 사용하는 문법입니다. Thymeleaf를 사용하면서 장점은 몇 가지가 있는데요. 아래에 더 자세히 설명하도록 하겠습니다.

 

1. JavaScript의 역할을 부분적으로 도와준다.

자바스크립트의 경우 대표적으로 화면이 움직이는 모션에 대해 많은 처리를 하는 부분이 있습니다. 또 문법도 어렵지 않게 if, for문을 그대로 사용하여 백엔드에서 구분하기 어려웠던 문법도 쉽게 풀 수 있습니다. 

 

Thymeleaf는 태그 안에서 사용가능하도록 앞에 타임리프의 문법인 'th:'를 먼저 넣습니다.

th:if로 시작하면 JavaScript의 if 문을 구현하고, th:each를 사용하면 for loop를 사용할 수 있습니다.

 

2. 속도가 빠르다.

자바스크립트는 클라이언트의 언어라고 생각하면, 자바는 서버의 성질이 강합니다.

서버와 클라이언트의 속도에 따라 다르겠지만, Thymeleaf를 처리하는 모델링을 담당하는 부분은 서버입니다. 서버에서 주기적으로 데이터를 정제함에 따라 서버의 성능에 영향을 많이 받는 타입입니다. CPU를 사용하여 계산을 하는 부분이 많다면 서버에서 처리하여 보여주는 것이 보안면에서나 성능면에서 빠를 수 있습니다. 

 

 

기본적으로 사용법은 자바에서 Model 객체 내에 담아주게 되며 사용하는 메서드는 addAttribute, addAllAttribute로 가능합니다.

 

 

클라이언트는 서버에서 처리한 데이터만을 보여주기 때문에 더 빠르게 화면을 로딩할 수 있겠지요.

 

3. 문법이 간편하다.

Thymeleaf는 많은 문법을 제공합니다. 템플릿 엔진 계열에서 역사가 꽤 오래되었기에 그만큼 지원하는 라이브러리도 많고 사용할 수 있는 방법도 많습니다. 기본적으로 Thymeleaf를 사용하기 위해서는 HTML Tag 내에 property명 앞에 'th:'를 붙입니다. 표현할 수 있는 기본 표현식은 여러 종류입니다.

 

Description	Expression	Example
변수 표현	${...}	${session.user}
선택자	*{...}	*{firstName}
메시지	#{...}	#{message}
링크	@{...}	@{abbo.tistory.com}
부분적 표현(fragment expression)	~{...}	frag=~{footer::#main/text()}
텍스트	'...'	'text1'
숫자		0, 1, 3.14
불리언		true, false
Null		null
리터럴 문자		one, main
텍스트 결합	+	${str1}+${str2}
문장 결합	|	|My name is ${name}|
숫자 연산	+, -, *, /, %	1+2-3*4/5%2
음수 기호	-
조건 연산	and, or, !, not	${condition1} and ${condition2}
비교 연산	>, <, >=, <=, gt, lt, ge, le	${number1} > 3

 

 

다음으로 th: 를 붙여서 사용할 수 있는 방법을 나열해보려 합니다.

 

Title	Description	Example		Result
th:text	텍스트 내용 출력	<span th:text="${name}"></span>		name = 'Niyo' 일 때 <span>Niyo</span>
th:utext	html 내용 변경	<div th:utext="${content"></div>		content = '<div>content</div>    <span>span tag</span>'일 때 <div>    <div>content</div>    <span>span tag</span> </div>
th:value	Value 수정(input, checkbox 등)	<input type="text" th:value="${val}" />		val='hello' 일때 <input type="text" value="hello"/>
th:with	변수값 지정	<div th:with="var1=${user.name}+' is user name'" th:text="${var1}"></div>		user.name = 'Niyo'일 때 <div>Niyo is user name</div>
th:if th:unless	조건문(if, else)	<span th:if="${user.name}=='Niyo'">Hi Niyo</span> <span th:unless=${user.name}=='Niyo'">You are not Niyo</span>		user.name이 Niyo일 때 <span>Hi Niyo</span> 그 외 <span>You are not Niyo</span> (둘 중 하나만 출력)
th:switch th:case	switch-case문	<div th:switch="${user.auth}"> <span th:case="1">All Authority</span> <span th:case="2">Access Declined</span> </div>		user.auth가 1일 때 <div>All Authority</div> user.auth가 2일 때 <div>Access Declined</div>
th:each	반복문	<p th:each="user,i:${userList} th:if=${i.index==2} th:text="${user.name}"		userList=[User(id=1,name=Niyo),User(id=2,name=Niyong),User(id=3,name=ABBO)] 일 때 <p>ABBO</p>만 출력

 

그 외에 다른 Title도 있는데 이는 HTML 태그 내의 property와 비슷하게 작동합니다.

예를 들어 th:class는 <div th:class="${cls}"> == <div class="cls"> 와 같은 원리입니다.

또, onclick의 경우도 <button th:onclick="alert(+${name}+)"> == <button onclick="alert('name')">의 역할을 하는 것도 만들 수 있어요. 작성할 수 있는 방법이 너무 많아 아래에 접어두었어요.

 

th:abbr	th:accept	th:accept-charset
th:accesskey	th:action	th:align
th:alt	th:archive	th:audio
th:autocomplete	th:axis	th:background
th:bgcolor	th:border	th:cellpadding
th:cellspacing	th:challenge	th:charset
th:cite	th:class	th:classid
th:codebase	th:codetype	th:cols
th:colspan	th:compact	th:content
th:contenteditable	th:contextmenu	th:data
th:datetime	th:dir	th:draggable
th:dropzone	th:enctype	th:for
th:form	th:formaction	th:formenctype
th:formmethod	th:formtarget	th:fragment
th:frame	th:frameborder	th:headers
th:height	th:high	th:href
th:hreflang	th:hspace	th:http-equiv
th:icon	th:id	th:inline
th:keytype	th:kind	th:label
th:lang	th:list	th:longdesc
th:low	th:manifest	th:marginheight
th:marginwidth	th:max	th:maxlength
th:media	th:method	th:min
th:name	th:onabort	th:onafterprint
th:onbeforeprint	th:onbeforeunload	th:onblur
th:oncanplay	th:oncanplaythrough	th:onchange
th:onclick	th:oncontextmenu	th:ondblclick
th:ondrag	th:ondragend	th:ondragenter
th:ondragleave	th:ondragover	th:ondragstart
th:ondrop	th:ondurationchange	th:onemptied
th:onended	th:onerror	th:onfocus
th:onformchange	th:onforminput	th:onhashchange
th:oninput	th:oninvalid	th:onkeydown
th:onkeypress	th:onkeyup	th:onload
th:onloadeddata	th:onloadedmetadata	th:onloadstart
th:onmessage	th:onmousedown	th:onmousemove
th:onmouseout	th:onmouseover	th:onmouseup
th:onmousewheel	th:onoffline	th:ononline
th:onpause	th:onplay	th:onplaying
th:onpopstate	th:onprogress	th:onratechange
th:onreadystatechange	th:onredo	th:onreset
th:onresize	th:onscroll	th:onseeked
th:onseeking	th:onselect	th:onshow
th:onstalled	th:onstorage	th:onsubmit
th:onsuspend	th:ontimeupdate	th:onundo
th:onunload	th:onvolumechange	th:onwaiting
th:optimum	th:pattern	th:placeholder
th:poster	th:preload	th:radiogroup
th:rel	th:rev	th:rows
th:rowspan	th:rules	th:sandbox
th:scheme	th:scope	th:scrolling
th:size	th:sizes	th:span
th:spellcheck	th:src	th:srclang
th:standby	th:start	th:step
th:style	th:summary	th:tabindex
th:target	th:title	th:type
th:usemap	th:value	th:valuetype
th:vspace	th:width	th:wrap
th:xmlbase	th:xmllang	th:xmlspace

 

 

Thymeleaf는 기본적으로 제공하는 th: 문법이 있지만 이외에 개발자가 더 쉽게 사용할 수 있고 Java와의 연결성을 더 확실하게 정해줄 수 있는 유틸리티를 제공합니다. 이를 Utility Objects이라고 하는데. 이 부분은 다음 글에서 작성하도록 하겠습니다!