728x90
1. Thymeleaf란?
Thymeleaf는 View Template Engine이다. 서버에서 클라이언트에게 응답할 브라우저 화면을 만들어주는 역할을 한다.
2. Thymeleaf 장점
- 코드를 변경하지 않기 때문에 디자인 팀과 개발 팀간의 협업이 편하다.
- JSP와 달리 Servlet Code로 변환되지 않기 때문에 비즈니스 로직과 분리되어 View에만 집중할 수 있다.
- 서버상에서 동작하지 않아도 되기 때문에 서버 동작 없이 화면을 확인할 수 있다.
3. Thymeleaf 기본 설정
3.1. 의존성 추가
Gradle 기준으로 작성
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}3.2. Thymeleaf 적용 HTML 문서에 네임스페이스 추가
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
</head>
<body>
<h1 th:text=${test}></h1>
</body>
</html>4. Thyemleaf 기본 문법
기본 문법에 대해서는 아래 Controller에서 보내는 데이터 기준으로 정리하였다.
public String main(Model model){
//String 형태에 data 변수
String data = "testData <b> a </b>";
//List 형태에 게시판 객체를 담은 변수
List<Board> boardList = boardService.getBoardList();
//model 객체를 통해 html 페이지에 데이터 전송
model.addAttribute("data", testData);
model.addAttribute("boardList", boardList);
return main;
}4.1. th:text="${}"
${} 표현식을 사용해서 Controller에서 전달받은 데이터에 접근할 수 있다.
<div th:text="${data}"></div>
html 페이지에서는
testData a로 나온다.4.2. th:href="@{}"
<a> 태그 안에 href 속성과 동일한 기능을 한다. 괄호안에 클릭시 이동하고자하는 url를 입력하면 된다.
<body>
<a th:hrf="@{/boardList?currentPageNum={page}}"></a>
</body>4.3. th:with="${}"
변수 형태의 값을 재정의하는 속성이다. 새로운 변수값을 생성할 때 사용한다.
<div th:with="boardId=${boardNum}" th:text="${boardId}">4.4. th:value="${}"
input의 value 값을 삽입할 때 사용한다. 여러개의 값을 넣을 땐 + 기호를 사용한다.
<input type="text" id="boardId" th:value="${boardId} + ${boardName}"/>4.5. xmlns:layout="", layout:decorator=""
- Thymeleaf의 Layout 기능을 사용하기 위해서는 의존성을 추가해줘야 한다.
- xmlns:layout은 Thymeleaf의 Layout 기능을 사용하기 위한 선언이다. Layout을 적용시킬 HTML 파일에 해당 선언을 한다. 그리고 해당 페이지에 th:fagment로 조각한 공통 영역을 가져와서 삽입한다.
★ html 페이지 설정 예시
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{board/layout/basic}">
★ 의존성 설정 예시
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'4.6. th:block
block은 Thymeleaf 표현을 어느 곳에서든 사용할 수 있도록 하는 구문이다. 해당 기능은 동적인 처리가 필요할 때 주로 사용된다. Layout이나 switch에 사용이 많이 된다.
<html lagn="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
//전체 레이아웃
<th:block th:fragment="footerFragment">
</th:block>
</body>
</html>4.7. th:fragment=""
- 웹페이지에 메뉴 탭이나 네비게이션바와 같이 공통으로 반복되는 영역이 존재할 때 사용한다. 공통 영역을 정의하여 코드로 정리한다.
- header나 footer에 삽입하여 조각화 한다. 이렇게 만들어진 조각을 삽입하고자 하는 대상 HTML 파일에서 th:replace"[파일경로 :: 조각이름]"을 통해 삽입한다.
<body>
<footer th:fragment="footerFragment">
<p>안녕하세요</p>
</footer>
</body>4.8. th:replace="~{파일경로 :: 조각이름}"
- fragment로 조각화한 공통 영역을 HTML에 삽입하는 역할을 한다.
- ::을 기준으로 앞에는 조각이 있는 경로를 뒤에는 조각의 이름을 넣어준다.
<body>
<div th:replace="~{/common/footer :: footerFragment}"></div>
</body>4.9. th:insert="~{파일경로 :: 조각이름}"
- insert는 태그 내로 조각을 삽입하는 방법이다. replace는 완전하게 바뀌기 때문에 replace 태그가 입력된 <div> 태그가 사라지고 fragment로 조각화한 코드가 완전히 대체된다.
- insert는 insert가 입력된 <div>안에 fragment를 삽입하는 개념이다. <div> 태그안에 조각화한 코드가 삽입 된다.
4.10. th:action="@{}"
form 태그 사용 시, 해당 경로로 요청을 보낼 때 사용된다.
<body>
<form th:action="@{/login}" th:object="${Member}" method="post">
<input type="text" id="userId" th:field="*{userId}" >
<input type="password" id="userPw" th:field="*{userPw}" >
</form>
</body>4.11. th:object="${}"
- <form> 태그에서 데이터를 보내기 위해 Submit을 할 때 데이터가 th:object 속성을 통해 object에 지정한 객체 값을 담아 넘긴다. 이때 값을 th:filed 속성과 함께 사용하여 넘긴다.
- Controller와 View 사이의 DTO Class 객체라고 생각하면 된다.
4.12. th:field="*{}"
- th:object 속성과 함께 th:field를 이용해서 HTML 태그에 멤버 변수 매핑할 수 있다.
- th:field를 이용하여 사용자 입력 필드는 id, name, value 속성 값이 자동으로 매핑된다.
- th:object와 th:field는 Controller에서 특정 클래스의 객체를 전달 받은 경우에만 사용 가능하다.
4.13. th:if="${}", th:unless="${}"
프로그래밍 언어의 조건문에 해당하는 속성이다. if, else 문을 의미한다.
if는 조건이 true일 때만 표시, unless는 조건이 false일 때만 표시한다.
<span th:if="${boardNum} == 1"></span>
<span th:unless="${boardNum} == 2"></span>4.14. th:each="변수 : ${boardList}"
${boardList}로 값을 받아온 것을 변수로 하나씩 가져온다는 의미이다. JAVA의 반복문 for와 비슷하다.
boardList는 ${boardList} 변수로 받아오는 객체를 저장하고, boardListStat은 boardList에 담긴 객체 수나 인덱스를 조회할 수 있다. 즉 상태 변수를 의미한다.
<tr th:each="boardList, boardListStat: ${boardList}">
<td><input type="checkbox" name="board_check" class="board_check" th:value="${boardList.board_num}"></td>
<td th:text="${boardListStat.index} + 1"></td>
<td th:text="${boardList.board_title}"></td>
<td th:text="${boardList.board_content}"></td>
<td th:text="${boardList.board_date}"></td>
</tr>boardListStat 상태 변수를 통해 알 수 있는 값은 아래와 같다.
| 상태 | 설명 | 예시 |
| index | 0부터 시작하는 값 | th:text="${boardListStat.index} |
| count | 1부터 시작하는 값 | th:text="${boardListStat.count} |
| size | 전체 사이즈 | th:text="${boardListStat.size} |
| even, odd | 짝수, 홀수 여부(boolean) | th:text="${boardListStat.even} th:text="${boardListStat.odd} |
| first, last | 처음, 마지막 여부(boolean) | th:text="${boardListStat.first} th:text="${boardListStat.last} |
| current | 현재 객체 | th:text="${boardListStat.current} |
4.15. th:switch, th:case
- 프로그래밍 언어에 switch case문과 같은 기능을 한다.
- switch case문으로 제어할 태그를 th:block으로 설정하고 그 안에 코드를 작성한다.
<th:block th:switch="${boardNum}">
<span th:case="1">게시판1</span>
<span th:case="2">게시판2</span>
</th:block>4.16. #numbers.sequence(start, end, step)
- 기본적으로 Thymeleaf에서는 #numbers라는 숫자 포맷 메소드를 지원한다. 가장 많이 사용하는 것이 #numbers.sequence이다.
<li class="page-item" th:each="num : ${#numbers.sequence(startPage, endPage)}" th:class="${num == pageNum} ? 'active'">
<a class="page-link" th:href="@{${path}(page=${num-1})}" th:text="${num}"></a></li>728x90
'개발 > Spring Boot' 카테고리의 다른 글
| [SpringBoot] 프로젝트 Java Version 변경 (0) | 2024.09.25 |
|---|---|
| [SpringBoot] 프로젝트 생성 (1) | 2024.09.25 |
