07 웹 계층 개발 - 회원 조회

shin·2023년 11월 19일

Spring Boot & JPA 웹 애플리케이션 개발

목록 보기

24/28

1. Member Controller

...
@Controller
@RequiredArgsConstructor
public class MemberController {

    private final MemberService memberService;
    
    ...
    
    @GetMapping("/members")
    public String list(Model model){

        List<Member> members = memberService.findMembers();
        model.addAttribute("members", members);

        return "members/memberList";

    }

조회한 상품을 뷰에 전달하기 위해 스프링 MVC가 제공하는 모델(Model) 객체에 보관
Member Service에서 findMembers 메서드를 사용해서 데이터를 끌어옴
model에 담아서 화면에 넘김
실행할 뷰 이름을 반환함
members 아래에 memberList라는 html 파일을 추가하여 데이터 조회를 위한 뷰를 만듦

2. memberList View

templates/members/memberList.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>#</th>
                <th>이름</th>
                <th>도시</th>
                <th>주소</th>
                <th>우편번호</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="member : ${members}">
                <td th:text="${member.id}"></td>
                <td th:text="${member.name}"></td>
                <td th:text="${member.address?.city}"></td>
                <td th:text="${member.address?.street}"></td>
                <td th:text="${member.address?.zipcode}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

타임리프는 위와 같이 HTML 태그를 그대로 가져다 쓰는 것이 큰 장점
모델에서 담아서 넘긴 members 리스트가 ${members}에 바인딩됨
<tr th:each="member : ${members}">와 같이 th:each 문법을 통해 루프를 돌리면서 데이터를 화면에 뿌리게 됨
${member.address?.city}처럼 타임리프에서 ?를 사용하면 null을 무시함
- if address가 없으면, then city를 조회해오지 않는다는 의미
- if 조건문을 사용하여 구현하면 코드가 복잡해지기 때문에, 타임리프는 이와같은 물음표 문법을 지원함
위 코드에서 엔티티를 손을 대지 않아도 되는 상황이기 때문에 멤버 객체를 조회해올 때 member entity를 그대로 출력했지만, dto로 변환을 해서 화면에 필요한 데이터들만 가지고 출력하는 것이 권장됨
- 어차피 서버 사이드에서 도는 것이기 때문에 위와 같은 템플릿엔진에서는 선택적으로 엔티티를 사용해도 괜찮음