스프링부트 너 뭐 돼?🤷‍♀️(3) - thymelef

joyfulwave·2022년 12월 5일

Spring boot Thymelef sts

스프링부트, 너 뭐 돼?

목록 보기

3/12

피할 수 없다면 즐기자! 스프링부트 너.. 뭐 돼?

📚 thymeleaf

타임리프는 순수 HTML을 최대한 유지하기 때문에 웹 브라우저에서 파일을 직접 열어도 HTML 내용을 확인할 수 있있어요. (퍼블리셔로부터 파일을 전달받을 때 리뷰하기 유용해요.)
서버를 통해 뷰 템플릿을 거치면 동적으로 변경된 결과 확인 가능해요.
순수 HTML을 그대로 유지하면서 view template도 사용할 수 있는 타임리프의 특징을 Natural Template이라고 해요.

📌 간단한 표현

변수 표현식 : ${...}
선택 변수 표현식 : *{...}
메시지 표현식 : #{...}
링크 URL 표현식 : @{...}
조각 표현식 : ~{...}

📌 리터럴 (Literal)

리터럴은 소스 코드상에 고정된 값을 말해요.

⚫ 텍스트 : 'text'

타임이프에서 문자 리터럴은 항상 ''(홑따옴표)로 감싸야 해요.

<span th:text="'hello'"></span>

공백 없이 쭉 이어지는 하나의 리터럴은 작은 따옴표를 생략할 수 있어요.

<span th:text="hello"></span>
<!--
<span th:text="hello world"></span>  (오류)
-->
<span th:text="'hello world'"></span>

⚫ 숫자 : 0, 1, 2, 3, 4 ...

⚫ 불린 : true, false

⚫ 널 : null

📌 기본 객체들

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

📌 연산

⚫ 비교연산 : HTML 태그 주의

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

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul>
		<li>비교 연산
			<ul>
				<li> 1 > 10 = <span th:text="1 &gt; 10"></span></li>
				<li> 1 > 10 = <span th:text="1 gt 10"></span></li>
				<li> 1 >= 10 = <span th:text="1 >= 10"></span></li>
				<li> 1 ge 10 = <span th:text="1 ge 10"></span></li>
				<li> 1 == 10 = <span th:text="1 eq 10"></span></li>
				<li> 1 != 10 = <span th:text="1 neq 10"></span></li>
			</ul>
		</li>	
	</ul>
</body>
</html>

⚫ 조건식

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<ul>
		<li>조건식
			<ul>
				<li>(10 % 2 == 0) ? '짝수':'홀수' == 
					<span th:text="(10 % 2 == 0) ? '짝수':'홀수'"></span>
				</li>
			</ul>
		</li>
    </ul>

⚫ Elvis 연산자

서버로부터 'data'의 값을 전달받아 타임리프로 그 값을 전달받았다고 가정했어요.

<!-- 삼항 연산자 -->
<span th:text="${data}" ? ${data} : '데이터가 없습니다.' ></span>

<!-- Elvis 연산자 -->
<span th:text="${data}" ?: '데이터가 없습니다.' ></span>

삼항 연산자는 data의 변수가 값이 있으면 참, 값이 없으면 거짓 곧 '데이터가 없습니다.' 를 출력해요. Elvis 연산자는 동일하게 작동하지만 참일때의 조건을 생략한 연산자 에요.

📌 속성 값 설정

th:* 로 속성을 적용하면 기존 속성을 대체해요.
기존 속성이 없으면 새로 만들어요.

<!-- th:value가 기본 value보다 우선 순위를 가지며 사이트 출력시에 '버튼뿅'이 value 값으로 보여지게 된다.-->
<button type="submit" value="버튼" th:value="버튼뿅" />

📌 반복 상태 유지

<tr th:each="user, userStat : ${users}">

반복의 두번째 파라미터를 설정해서 반복의 상태를 확인 할 수 있어요.
두번째 파라미터는 생략 가능한데, 생략하면 지정한 변수명(user) + Stat 으로 생성이 돼요. 여기서는 user + Stat = userStat.

userStat

index : 0 부터 시작하는 값

count : 1 부터 시작하는 값

size : 전체 사이즈

even, odd : 홀, 짝 여부(Boolean)

first, last : 처음, 마지막 여부(boolean)

current : 현재 객체

📌 조건부 평가

if, unless(if의 반대)
타임리프는 해당 조건이 맞지 않으면 태그 자체를 랜더링하지 않아요.

📌 블록

<th:block>은 HTML태그가 아닌 타임리프의 유일한 자체 태그에요.

📌 자바스크립트 인라인

타임리프는 자바스크립트에서 타임리프를 편하게 사용할 수 있는 자바스크립트 인라인 기능을 제공해요.

  <script th:inline="javascipt">

📌 th:object 와 th:field

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="1">
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
			</tr>
		</thead>
		<tbody>
			<tr th:object="${Item}">
				<td th:text="*{itemId}"></td>
				<td th:text="*{itemName}"></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

📌 th:field

th:field="${item.itemName}"
-> id="itemId" name="itemId"을 같이 만들어줘요.
th:field="{itemName}"
- th:object 소속이라는 뜻의 을 넣어주면 item도 생략 가능해요.
- th:field : name, id, value 속성을 자동으로 만들어줘요.