[Spring Boot] 스프링부트 타임리프 (thymeleaf) 정리

 

 

---

URL 관련

이름	사용법	설명
Context-relative URL	<a th:href="@{/**/**}">	서버 내 특정 위치로 이동
Adding Parameter URL	<a th:href="@{/**/**(id=1)}">  <a th:href="@{/**/**(id=${list.seq})">	파라미터를 추가하는 방식의 URL 첫번째 줄은 고정적인 값을 넘길때, 두번째 줄은 서버에서 받아온 값을 넘길때

---

If/Else, For 문

이름	사용법	설명
if/else	th:if = "${size} == '0' "  th:unless = "${size} == '0' "	프로그래밍에 if else.
for	th:each="obj : ${list}"	향상된 for each문이라고 생각하면 된다. ${list}에 있는 객체가 obj로 맵핑된다.

 

---

If/Else, For문 예제

 

Table에서 사용시, 아래와 코드와 같이 혼합해서 사용가능. ${list}객체를 user가 받아 user 클래스 안에있는 

프로퍼티스 접근 

<tbody id="">
     <tr th:if="${size} == '0'">
		<td colspan=2>데이터가 없습니다.</td>
	 </tr>
     <tr th:unless="${size} == '0'" th:each="user : ${list}">
		 <td th:text="${user.index}">1</td>
		 <td th:text="${user.name}">Brian</td>
	</tr>
</tbody>

---

For문으로 받아온 객체값 자바스크립트 변수에 넣어주기 

ex) tr 태그 클릭시 화면이동 하고 싶을때, 특정 변수를 파라미터로 받아 값을 넘겨줄때 th:data 다음엔 아무이름이나 정해주면 된다. ( *th:data-별칭 ) 그리고 getAttribute로 loadDetailView 함수 파라미터에 값을 넣어준다.

<tbody id="">
	<tr th:if="${size} == '0'">
		<td colspan=2>데이터가 없습니다.</td>
	</tr>
	<tr th:unless="${size} == '0'" th:each="user : ${list}"
	th:data-index="${user.index}"
	th:onclick="loadDetailView(this.getAttribute('data-index'))">
		<td th:text="${user.index}">1</td>
		<td th:text="${user.name}">Leo Choi</td>
	</tr>
</tbody>

---

Text,Value 관련

 

이름	사용법	설명
Text	th:text="${name}"	서버로부터 받아온 값을 바로 HTML 텍트스로 렌더링. 또한 일반 글자랑 서버로 받아온 값을 혼합해서 사용가능하다.
Value	th:value=${name}	input 태그나 select,button 등등 여러 태그 값에 서버로부터 받은 값을 렌더링

---

Text,Value 예시

 

Text같은경우 혼합해서 많이 사용하기 때문에 아래와 같이 작성하면 된다. ** ||  안에 일반 텍스트와 서버로부터 받은

값을 혼합해서 사용가능.

<div class="card-footer small text-muted" th:text="|Updated at ${now}|">Updated at 11:59 PM</div>

Value 예시는 별거 없다.

<input type="text" readonly name="phone" th:value="${user.phone}">

---

FROM 태그

 

코드예시로 설명 하겠다.

th:field 는 empVO 에 정한 변수이름이 필드이름 형식으로 사용한다는 것.

th:errors는 에러가 발생시 보여줄 에러값 내용. 단, *@Valid와 BindingResult 객체를 사용할때만 form를 ajax로 전송시 사용 하지 않음. 유동성있게 사용 바람. 

<form th:action="@{/user/sign-up}" th:object="${tempVO}" th:method="post">

    <label>이메일 :</label>
    <input type="text" name="email" th:field="*{email}">
    <p th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></p>
    
    ...
</form>

 

 

이외에 타임리프는 페이지내에서 처리해주는 계산식과 여러 함수들을 제공해준다. 그중에 많이 사용했던

날짜 포맷

 

예) 시간 포맷 자바의 캘린더 객체 사용가능

<td th:text="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd HH:mm')}"></td>