📂 java/controller/MemberController.java
@GetMapping(value = "/members")
public String list(Model model){
List<Member> members = memberService.findMembers();
model.addAttribute("members", members);
return "members/memberList";
}
기존의 웹 mvc를 구성할때의 형식과 비슷하다. model객체에 members를 받아 template/members/memberList.html로 넘겨준다.
📂 resource/template/members/memberList.html
<!DOCTYPE html>
<html xmlns:th = "http://thymeleaf.org">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class = "container">
<table>
<thead>
<tr>
<th>#</th>
<th>이름</th>
</tr>
</thead>
<tbody>
<tr th:each = "member : ${members}">
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
그렇게 넘겨준 model 즉 members라는 이름으로 넘겨줬던 것을 받아 화면에 출력을 시켜주게 된다.
여기서 이제 thymeleaf가 사용되었는데
<tr th:each = "member : ${members}">
반복을 하기 위한 구문이다. for each와 비슷한 구문이라 볼 수 있는데 member에 members에 있는 값들을 넣어 진행시킨다.
<td th:text="${member.id}"></td>
<td th:text="${member.name}"></td>
그 이후 존재하는 이 구문들은 member의 id와 name을 꺼내와 출력을 시킨다.
즉 예시를 들어 이전에 만든 회원 등록 화면에서 spring과 spring1이라는 이름을 등록시켰을때 다음과 같은 화면이 나오게 된다.
여기서 나오는 thymeleaf에는 th:text,each라는 구문이 사용이 되었다.
간단하게 알아보자면
태그 안의 텍스트를 서버에서 전달 받은 값에 따라 표현하고자 할 때 사용된다.
<span th:text="${hello}">message</span>
이 경우 서버에서 hello라는 변수가 있을 경우 message의 자리를 변수값으로 대체하게 된다.
반복문이 필요한 경우에 사용한다.
리스트와 같은 collection 자료형을 서버에서 넘겨주면 그에 맞춰 반복적인 작업이 이루어질 때 사용한다.
<span th:each="member : ${members}"></span>
이 경우 members에 있는 모든 member들을 꺼내와 member들에 넣어주면서 반복문이 실행이 되어진다.
김영한 - 스프링 입문 강의
thymeleaf 관련 춍춍블로그