thymeleaf) 객체의 리스트 클라이언트에 전달하기

 

서버에서 클라이언트에 전달할 정보들을 DTO 에 담아서 보내는 경우가 많다.

그런데 만약 DTO 의 리스트를 전달하고 싶다면 어떻게 할까?

 

DTO를 리스트에 담아서 모델에 담을수는 있다.

그런데 이렇게 될 경우 thymeleaf 로 꺼내서 쓰기가 불가능한것 같다.

하지만 우회하는 방법이 있다.

 

아래 DTO 는 하나의 옷의 정보를 담고있다.

한 페이지에 여러개의 옷의 정보들을 디스플레이 하고 싶기 때문에 여러개의 ClothingDto 를 보내야 한다.

 

ClothingDto.java

@Data
public class ClothingDto {
    // 상품 ID
    private UUID productId;
    // 상품명
    private String name;
    // 금액
    private int price;
    // 썸네일 앞면
    private String  thumbnail_front_url;
    // 썸네일 뒷면
    private String thumbnail_back_url;

    public ClothingDto() {}

    public ClothingDto(UUID productId, String name, int price, String thumbnail_front_url, String thumbnail_back_url) {
        this.productId = productId;
        this.name = name;
        this.price = price;
        this.thumbnail_front_url = thumbnail_front_url;
        this.thumbnail_back_url = thumbnail_back_url;
    }
}

 

이럴때는 DTO 를 하나 더 만들면 된다.

 

이런식으로 ClothingDto 를 담는 List 가 존재하는 ClothingDtoList 를 만든다.

 

ClothingDtoList.java

// ClothingDto 리스트 DTO
@Data
public class ClothingDtoList {
    List<ClothingDto> clothingDtoList = new ArrayList<>();
}

 

 

그리고 모델에는 이 리스트를 담는다.

 model.addAttribute("clothingDtoList", clothingDtoList);

 

 

---

 

이제 타임리프로 꺼내 쓰는 방법은 아래와 같다.

 

clothing.html

<div th:object="${clothingDtoList}" class="row product-row">
                <!-- thymeleaf th:each -->
                <div th:each="product : *{clothingDtoList}"
                    class="col-6 col-sm-6 col-md-4 col-xl-4 product-placeholder mb-3">
                    <!-- 이미지 링크 -->
                    <a href="/templates/index.html"
                        th:href="@{/order/products?productId={productId}(productId=${product.productId})}">
                        <!-- 프론트 썸네일 이미지 존재하면 랜더링 -->
                        <!-- hover -->
                        <div th:if="${product.thumbnail_front_url != null}" class="image-container">
                            <img class="original-image img-fluid" th:src="${product.thumbnail_front_url}"
                                alt="Original Image">
                            <img class="hover-image img-fluid" th:src="${product.thumbnail_back_url}" alt="Hover Image">
                        </div>
                        <!-- 존재하지 않는 예외 경우 지정된 이미지 임시로 렌더링 -->
                        <img class="img-fluid" th:unless="${product.thumbnail_front_url != null}"
                            th:src="@{/image/clothing/KakaoTalk_20240207_105747721_01.jpg}" alt="">
                    </a>
                    <!-- 상세 -->
                    <div class="container align-items-center justify-content-center">
                        <div th:text="${product.name}" class="text-center product-placeholder-exp">CAPT005</div>
                        <div th:text="${#numbers.formatCurrency(product.price)}"
                            class="text-center product-placeholder-exp"></div>
                    </div>
                </div>
            </div>

 

th:object="${clothingDtoList}"

모델에 담겨있는 clothingDtoList 를 사용하겠다고 선언한다.

이 선언 내부에서는 clothingDtoList 를 사용할수 있고 * 문법으로 내부에 있는 데이터를 꺼낼수 있다.

 

th:each="product : *{clothingDtoList}"

여기서 *{clothingDtoList} 가 의미하는 것은 th:object 로 선언한 clothingDtoList 내부의 clothingDtoList 다.

좀 햇갈릴수 있는데 th:object 에서 선언한 clothingDtoList 는 모델에 담긴 어트리뷰트 이름 즉 ClothingDtoList.java 이고,

th:each 의 *{clothingDtoList} 는 ClothingDtoList.java 내부의 리스트를 의미한다.

 

그리고 여기부터는 ${product.name}, ${product.price} 이런 식으로 타임리프 문법에 따라 사용하면 된다.