Common
th:text
화면에 값을 출력할 때 사용
<span th:text="${nickname}"></span>th:if
조건문처럼 사용 한다. 해당 조건이 만족할 때만 보여준다.
<div th:if="${error}">
<p>에러 발생</p>
</div>th:errors
해당 value의 error가 있는 경우 출력한다.
<ul>
<li th:errors="*{id}" />
<li th:errors="*{name}" />
</ul>form의 validation error를 출력할 때 사용할 수 있다.
<form class="needs-validation col-sm-6" action="#"
th:action="@{/sign-up}" th:object="${signUpForm}" method="post" novalidate>
<div class="form-group">
<label for="nickname">닉네임</label>
<input id="nickname" type="text" th:field="*{nickname}" class="form-control"
placeholder="junseo" aria-describedby="nicknameHelp" required minlength="3" maxlength="20">
<small id="nicknameHelp" class="form-text text-muted">
공백없이 문자와 숫자로만 3자 이상 20자 이내로 입력하세요. 가입후에 변경할 수 있습니다.
</small>
<small class="invalid-feedback">닉네임을 입력하세요.</small>
<small class="form-text text-danger" th:if="${#fields.hasErrors('nickname')}" th:errors="*{nickname}">Nickname Error</small>
</div>
</form>form
th:action
form 태그 사용 시, 해당 경로로 요청을 보낼 때 사용. (url)
th:object
form submit을 할 때, form의 데이터가 th:object에 설정해준 객체로 받아진다.
th:field
각각 필드들을 매핑을 해주는 역할을 한다. 설정해 준 값으로, th:object에 설정해 준 객체의 내부와 매칭해준다.
예시
<form th:action="@{/sign-up}" th:object="${signUpForm}" method="post">
<div class="form-group">
<label for="nickname">닉네임</label>
<input id="nickname" type="text" th:field="*{nickname}" class="form-control">
</div>
</form>중복 제거
th:fragment
header, footer, navigation bar 같이 모든 페이지에 보여져야하는 항목인 경우 따로 분리해서 관리한다.
이럴 경우에 사용하는 태그이다.
// fragments.html
<head th:fragment="head">
<meta charset="UTF-8">
<title>StudyOlle </title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<style>
.container {
max-width: 100%;
}
</style>
</head>th:replace & th:insert
fragment와 함께 쓰이며, 각 화면에 분리해 놓은 fragment를 붙여넣을 때 사용한다.
th:replace는 태그 전체를 교체해주는 것이다.(아래 예시 경우, head 태그 자체가 fragments.html의 head로 바뀐다.)
// index.html
<head th:replace="fragments.html :: head"></head>th:insert는 해당 태그 내부에 fragment를 삽입해주는 것이다.(아래 예시 경우, div 태그 내부에 fragments.html의 content가 삽입된다.)
// index.html
<div th:insert="fragments.html :: content">
</div>Utility
타임리프에서 utility를 사용할때는 #을 사용한다.
아래와 같이 사용할 수 있다.(strings 유틸리티의 listJoin사용)
th:value="${#strings.listJoin(tags, ',')}"
strings.listJoin
문자열 리스트를 ' , ' 를 사용해서 변환해준다.
ex
List<String> tags = List.of("Spring", "JPA");
=> Spring, JPA사용 예시 th:value="${#strings.listJoin(tags, ',')}"
정리 감사합니다 :)