[백엔드 첫 걸음] 웹 MVC 개발2 - (회원 관리 예제)

khyojun·2022년 7월 29일
0

Spring 시작

목록 보기
13/15
post-thumbnail

1. 회원 웹 기능 - 회원 조회

📂 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라는 구문이 사용이 되었다.

간단하게 알아보자면

th:text

태그 안의 텍스트를 서버에서 전달 받은 값에 따라 표현하고자 할 때 사용된다.

ex)

<span th:text="${hello}">message</span>

이 경우 서버에서 hello라는 변수가 있을 경우 message의 자리를 변수값으로 대체하게 된다.

th:each

반복문이 필요한 경우에 사용한다.
리스트와 같은 collection 자료형을 서버에서 넘겨주면 그에 맞춰 반복적인 작업이 이루어질 때 사용한다.

ex)

<span th:each="member : ${members}"></span>

이 경우 members에 있는 모든 member들을 꺼내와 member들에 넣어주면서 반복문이 실행이 되어진다.

알게 된 점

  1. 회원조회를 위한 구현
  2. thymeleaf가 어떻게 사용이 되어졌는지

참고

김영한 - 스프링 입문 강의
thymeleaf 관련 춍춍블로그

profile
코드를 씹고 뜯고 맛보고 즐기는 것을 지향하는 개발자가 되고 싶습니다

0개의 댓글