th:each 는 반복이다.
${..} 는 변수 표현식이다.
1. th:each="member : ${members}"
반복하면서 members에 값들을 가지고 온다.
2. th:text="${member.값}
반복에서 받은 member 값을 text로 보여준다.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body>
<h2>Members</h2>
<div>
<table>
<thead>
<tr>
<th style="width: 100px">No</th>
<th style="width: 100px">이름</th>
<th style="width: 100px">내용</th>
</tr>
</thead>
<tbody>
<tr th:each="member : ${members}">
<td style="width: 100px; text-align: center" th:text="${member.number}">1</td>
<td style="width: 100px; text-align: center" th:text="${member.name}">이름</td>
<td style="width: 100px; text-align: center" th:text="${member.contents}">내용</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Member 클래스는
public class Member {
private int number;
private String name;
private String contents;
public Member() {
}
public Member(int number, String name, String contents) {
this.number = number;
this.name = name;
this.contents = contents;
}
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getContents() {
return contents;
}
public void setContents(String contents) {
this.contents = contents;
}
}Model을 통해 member 변수를 넣어 주고 리턴하면
@GetMapping("/members")
public String members(Model model) {
List<Member> members = memoryRepository.findAll();
model.addAttribute("members", members);
return "view/members";
}화면에서
이렇게 나오게 된다.
자세한 코드는 https://github.com/seongjindev/thymeleaf_practice 를 참고하고
https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#iteration-basics 를 통해 타임리프를 배울 수 있다.
'프로그래밍 > thymeleaf' 카테고리의 다른 글
| 타임리프(thymeleaf) 링크 URL 표현식 @{} (0) | 2021.09.28 |
|---|---|
| 타임리프(thymeleaf) 선택 변수 표현식 *{} (0) | 2021.09.17 |
| 타임리프(thymeleaf) map 데이터 출력 (0) | 2021.09.15 |
| 타임리프(thymeleaf) 텍스트 출력 (0) | 2021.09.12 |
| 타임리프(thymeleaf) (0) | 2021.09.03 |