Thymeleaf - 스프링 통합과 폼

입력 폼 처리

• th:object : 커맨드 객체를 지정
• *{...} : 선택 변수 식 → th:object 에서 선택한 객체에 접근
• th:field HTML 태그의 id , name , value 속성을 자동으로 처리

<form action="item.html" th:action th:object="${item}" method="post">
    <div>
        <label for="id">상품 ID</label>
        <input type="text" class="form-control" th:field="*{id}" readonly>
    </div>

• th:object="${item}" : <form>에서 사용할 객체를 지정
• th:field="*{itemName}" (선택 변수 식 사용)
  • th:field는 id , name , value 속성을 모두 자동으로 만들어줌

 

체크 박스

<!-- single checkbox -->
<div>판매 여부</div>
<div>
    <div class="form-check">
        <input type="checkbox" id="open" th:field="*{open}" class="form-checkinput">
        <label for="open" class="form-check-label">판매 오픈</label>
    </div>
</div>

• 타임리프를 사용하면 체크 박스의 히든 필드와 관련된 부분도 함께 해결
• disabled를 사용해서 상품 상세에서는 체크 박스가 선택되지 않도록 함
• th:field를 사용하면, 값이 true인 경우 체크를 자동으로 처리 → checked="checked"

 

체크 박스 - 다중 선택

@ModelAttribute - 같은 체크 박스를 반복해서 보여주어야 할 때 사용

@ModelAttribute("regions")
public Map<String, String> regions() {
    Map<String, String> regions = new LinkedHashMap<>();    // 순서 보장
    regions.put("SEOUL", "서울");
    regions.put("BUSAN", "부산");
    regions.put("JEJU", "제주");
    return regions;
}

addForm.html 추가

<div>
    <div>등록 지역</div>
    <div th:each="region : ${regions}" class="form-check form-check-inline">
        <input type="checkbox" th:field="${item.regions}" th:value="${region.key}" class="form-check-input">
        <label th:for="${#ids.prev('regions')}"
               th:text="${region.value}" class="form-check-label">서울</label>
    </div>
</div>

• th:for="${#ids.prev('regions')}"
  • 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여줌
  • 타임리프는 ids.prev(...) , ids.next(...) 을 제공해서 동적으로 생성되는 id 값을 사용

 

라디오 버튼

Controller에 추가

@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
    return ItemType.values();
}

addForm.html에 추가

<!-- radio button -->
<div>
    <div>상품 종류</div>
    <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
        <input type="radio" th:field="*{itemType}" th:value="${type.name()}" class="form-check-input">
        <label th:for="${#ids.prev('itemType')}" th:text="${type.description}" class="form-check-label">
            BOOK
        </label>
    </div>
</div>

• 라디오 버튼은 이미 선택이 되어 있다면, 수정시에도 항상 하나를 선택하도록 되어 있으므로 체크 박스와 달리 별도의 히든 필드를 사용할 필요가 없음
• value의 값이 field의 값과 일치할 때 checked를 "checked"로 바꿔줌

 

셀렉트 박스

Controller에 추가

@ModelAttribute("deliveryCodes")
public List<DeliveryCode> deliveryCodes() {
    List<DeliveryCode> deliveryCodes = new ArrayList<>();
    deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송"));
    deliveryCodes.add(new DeliveryCode("NORMAL", "일반 배송"));
    deliveryCodes.add(new DeliveryCode("SLOW", "느린 배송"));
    return deliveryCodes;
}

addForm.html에 추가

<!-- SELECT -->
<div>
    <div>배송 방식</div>
    <select th:field="*{deliveryCode}" class="form-select">
        <option value="">==배송 방식 선택==</option>
        <option th:each="deliveryCode : ${deliveryCodes}" th:value="${deliveryCode.code}"
                th:text="${deliveryCode.displayName}">FAST</option>
    </select>
</div>

<hr class="my-4">

 

 

 

 

 

참고 강의:

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의