타임리프는 스프링 부트에서 공식적으로 지원하는 View 템플릿이다
타임리프 장점
- 코드를 변경하지 않기 때문에 서버팀과 퍼블팀 간의 협업이 편해진다
- JSP와 달리 Servlet Code로 변환되지 않기 때문에 비즈니스 로직과 분리되어 오로지 View에 집중할 수 있다
- 서버상에서 동작하지 않아도 되기 때문에, 서버 동작 없이 화면을 확인할 수 있다, 더미 데이터를 넣고 화면 디자인 및 테스트에 용이하다. (서버가 구동하지 않는 경우 정적 컨텐츠)
타임리프 적용방법
메이븐
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>그래들
build.gradle
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'application.properties
# Thymeleaf 사용
spring.thymeleaf.enabled=true
# cache 사용 /사용 시 컴파일한 파일만 사용 (개발 시 미사용)
spring.thymeleaf.cache=false
# 템플릿 위치 / View 파일 위치
spring.thymeleaf.prefix=classpath:templates/
# View 파일 기본 확장자 / Controller에서 확장자를 입력하지 않아도 된다.
spring.thymeleaf.suffix=.html
타임리프 문법
@Controller
public class mainController {
@GetMapping("/user")
public String mypage(Model model) {
model.addAttribute("data", "Hello <b>Spring</b>!");
return "user/mypage";
}
}⭐️ th:text="${}"
<div>
<h1 th:text="${data}"></h1>
</div>
- 일반 텍스트를 반환할 때 사용한다
- HTML 태그도 String 값으로 반환한다 => 출력: Hello Spring
- JSP의 EL 표현식인 ${}와 마찬가지로 ${} 표현식을 사용해서 컨트롤러에서 전달받은 데이터에 접근할 수 있다
⭐️ th:utext="${}"
<div>
<h1 th:utext="${data}"></h1>
</div>- th:text와 동일하게 텍스트를 반환하지만, HTML 태그를 사용 가능하게 해준다
=> 출력: Hello <b>Spring<b>
⭐️th:src="${}"
<img class="img" th:src="${dataList.IMG_URL}">- 이미지 src 사용시
⭐️th:href="@{}", th:href="||"
<body>
<a th:hrf="@{/mypage}"></a> // 파라미터 없는 경우
<a th:hrf="@{/mypage?userNum={num}}"></a> // 파라미터 넘길경우
<a href="@{/user/profile(param=${param})}"></a> // 파라미터 넘길경우
<a href="@{user/product/{param1}(param2=A, param3=B)}"></a> // 파라미터 여러개 넘길경우
<a th:href="|/mypage?userNum=${num}|"><</a> // 이것도 가능
</body>- <a> 태그의 href 속성과 동일하다
- 괄호안에 클릭시 이동하고자하는 url를 넣는다
⭐️th:value="${}"
<input type="text" id="userId" th:value="${userId} + '의 이름은 ${userName}"/>- input의 value에 값을 삽입할 때 사용한다
- 여러개의 값을 넣을땐 + 기호를 사용한다
⭐️th:style="${}"
<div class="img" th:style="'background-image:url('+ ${dataList.IMG_URL} +');'"></div>
<input th:style="${'width:500px'}" type="text" />- 스타일 적용시
- background에서 url 적용시 위에 같이 하면 된다
⭐️th:if="${}", th:unless="${}"
<a href="/product" th:if="${session.userAuth == '1'}">상품등록</a>
<a href="/product" th:unless="${session.userAuth == '2'}">상품등록</a>- 조건문에 해당하는 속성이다. 각각 if와 else를 뜻한다
- th:unless는 일반적인 언어의 else 문과는 달리 th:if에 들어가는 조건과 동일한 조건을 지정해야 한다
⭐️th:block, th:each="변수 : ${list}"
<!-- th:block 미사용 -->
<div th:each="user : ${userList}">
<span th:text="user.username}">username</span>
<span th:text="user.age}">age</span>
</div>
<div th:each="user : ${userList}">
<span th:text="${user.username} + ' & ' + ${user.age}">username&age</span>
</div>
<!-- th:block 사용 -->
<th:block th:each="user : ${userList}">
<div>
<span th:text="user.username}">username</span>
<span th:text="user.age}">age</span>
</div>
<div>
<span th:text="${user.username} + ' & ' + ${user.age}">username&age</span>
</div>
</th:block>- th:block은 가상 태그를 만드는 데 사용한다 사용이 끝나면 문서에서 가상 블록은 사라지게 된다. 주로 조건문, 반복문에 많이 사용된다
⭐️th:classappend="${}"
<buttonth:classappend="${i == pageNum} ? 'on'"></button>- 클래스를 동적으로 추가해준다
⭐️th:switch, th:case
<th:block th:switch="${userNum}">
<span th:case="1">권한1</span>
<span th:case="2">권한2</span>
</th:block>
- switch-case문과 동일하다
- switch case문으로 제어할 태그를 th:block으로 설정하고 그 안에 코드를 작성한다
⭐️th:
<div th:seq="${i.SEQ}"></div>- 태그의 임의 속성 추가시 앞에 th만 붙여주면 된다. ex) th:seq, th:num 등등
++
와우 이런 기능도 있어
⭐️ 숫자 천만단위에 콤마 찍기!!!
<td th:text="${#numbers.formatInteger(i.PRICE, 0, 'COMMA')}"></td>
📖 참고
https://velog.io/@alicesykim95/Thymeleaf
Spring Thymeleaf 기본 문법
타임리프(Thymeleaf)는 View Templete Engine으로 JSP, Freemarkerd와 같이 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다. 타임리프의 주 목표는 템플릿을 만들 때 유지관리가 쉽
velog.io
'IT > etc' 카테고리의 다른 글
| 파이어베이스 실시간 데이터베이스로 채팅 구현1 (설정, 셋팅) (0) | 2023.09.05 |
|---|---|
| vi 파일 맨 끝으로 이동 (0) | 2023.08.24 |
| 젠킨스 - 슬랙 연동 (0) | 2023.08.08 |
| 젠킨스 타임존 변경 (0) | 2023.05.01 |
| [JSP/JSTL] EL태그 replace로 *주기 (0) | 2022.09.19 |