티스토리 뷰
Thymeleaf 레이아웃 기능
xmlns:th="http://www.thymeleaf.org"
자주 사용하는 문법
- th:text
- th:href
- th:insert
- th:each
- th:action
- th:value
이 정도가 있다. 그럼 하나하나씩 어떤 상황에 사용하는지 알아보자.
th:text
텍스트 내용이다. 기본문법은 아래와 같다.
th:text="${ data }"
서버에 담겨있는 데이터를 텍스트로 출력할 때 사용한다.
예를 들어 사용자가 게시글을 썼다고 가정해보자. 그럼 게시글의 제목을 화면에 출력해보자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span th:text="${board.title}"></span>
</body>
</html>
th:href
url을 적으면 그 url경로로 이동한다. 기본문법은 아래와 같다.
<a th:href="@{ 특정 url 경로 }">
버튼이나 a태그로 특정 페이지로 이동하고 싶을 때 사용한다.
예를 들어 제목 조회에서 한 개의 게시판만 보고 싶다고 가정해보자. 그럼 제목을 클릭하면 해당 게시글로 넘어가게 해보자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a th:href="@{'/post/' + ${board.id}}">
<span th:text="${board.title}"></span>
</body>
</html>
th:insert
각 화면에 분리해놓은 fragment를 붙이는 역할을 한다. 기본문법은 아래와 같다.
<div th:insert=" 분리해놓은 html경로 "></div>
페이지마다 존재해야 하는 부분이 있다. 대표적으로 header와 footer인데, header와 footer을 각 페이지마다 작성하면 코드가 중복되고 가독성이 떨어진다. 그래서 th:insert는 header와 footer를 따로 분리해놓았다가 한줄로 붙일 때 사용한다.
예를 들어 헤더를 전체조회 페이지에 붙여보자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:insert="common/header.html" id="header"></div>
</body>
</html>
th:each
반복문이라고 생각하면 된다. 기본문법은 아래와 같다.
<th:each="객체 : ${ 데이터 }">
예를 들어 3명의 사용자가 게시글을 작성했다고 가정해보자. 그럼 전체 게시글을 조회해보자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">글제목</th>
<th scope="col">작성자</th>
<th scope="col">작성일</th>
</tr>
</thead>
<tbody>
<tr th:each="board : ${boardAllList}">
<td>
<span th:text="${board.id}"></span>
</td>
<td>
<a th:href="@{'/post/' + ${board.id}}">
<span th:text="${board.title}"></span>
</a>
</td>
<td>
<span th:text="${board.writer}"></span>
</td>
<td>
<span th:text="${#temporals.format(board.createdDate, 'yyyy-MM-dd HH:mm')}"></span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
th:action
form 태그 안에 사용하고, 해당 경로로 요청을 보낸다. 기본문법은 다음과 같다.
<form th:action="@{ 해당 경로 }" method="요청 메서드">
get과 post는 쉽게 구현이 가능하지만 put과 delete는 처음 해보신 분들은 어떻게 적용하는 지 모르는 경우가 많다.
그럼 삭제버튼을 구현해보자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="delete-form" th:action="@{'/post/' + ${boardDto.id}}" method="post">
<input type="hidden" name="_method" value="delete"/>
<input class="btn btn-primary" type="submit" value="삭제하기">
</form>
</body>
</html>
th:value
값을 출력한다. 기본문법은 아래와 같다.
<input type="text" th:value="${ 데이터 }">
th:text와 차이점은 text는 데이터를 출력만 할 때 사용하고 th:value는 수정할 데이터를 출력할 때 사용하는 것인 줄 알았는데,
알고보니 input text 때문에 수정할 데이터처럼 보였던 것이다. 한 번 나중에 차이점을 알아봐야 겠다.
예로 제목을 수정하기 위해 조회해보자.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form th:action="@{'/post/edit/' + ${boardDto.id}}" method="post">
<input type="hidden" name="_method" value="put" />
<input type="text" class="form-control" name="title" th:value="${boardDto.title}">
</form>
</body>
</html>
'SpringBoot' 카테고리의 다른 글
| AOP 실무 사례 알아보기 (0) | 2022.07.09 |
|---|---|
| AOP 개념과 용어 정리 (0) | 2022.07.09 |
| 게시판 화면을 위한 Thymeleaf 적용과 데이터 출력하기 (0) | 2022.07.08 |
| setter를 지양하고 Builder 패턴을 사용하자 (0) | 2022.05.05 |
| 자바 코드로 직접 스프링 빈 등록하기 (0) | 2022.04.11 |
- Total
- Today
- Yesterday