Thymeleaf#2 Spring과 HTML Form 처리

타임리프는 스프링이 없어도 동작한다. 다만 스프링과 함께 사용하기 정말 편하게 만들어져있다.

• 기본 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
• 스프링 통합 메뉴얼: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html

# 스프링에서 타임리프 사용하기

원래는 @Bean으로 타임리프 엔진과 타임리프 뷰리졸버를 스프링 빈으로 등록해야 했으나, 스프링 부트에서는 한줄만 추가하면 된다.

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

# HTML Form 만들기

• 폼 태그에 th:object="${item}" 을 이용해 선택변수 *{name} 해당 객체의 필드를 편하게 사용할 수 있다.
• 인풋 태그에 th:filed="..." 를 지정해주면 태그 속성 id, name, value가 자동 생성된다.

• th:action, th:value는 기존 태그와 같으나 타임리프 문법을 적용하기 편하게 렌더링 해준다.
  + 런타임에 발생할 HTML 오류를 IDE 또는 렌더링시에 찾을 수 있게 만들어주는 효과도 있다.

@GetMapping("/add")
public String addForm(Model model) {
    model.addAttribute("item", new Item());
    return "form/addForm";
}

<form action="item.html" method="post" th:action th:object="${item}">
  <div>
    <label for="itemName">상품명</label>
    <input class="form-control" placeholder="이름을 입력하세요" th:field="*{itemName}" 
     type="text">
  </div>
  <div>
    <label for="price">가격</label>
    <input class="form-control" placeholder="가격을 입력하세요" th:field="*{price}"
     type="text">
  </div>
  <div>
    <label for="quantity">수량</label>
    <input class="form-control"  placeholder="수량을 입력하세요" th:field="*{quantity}"
     type="text">
  </div>

# 복잡한 Form 만들기

복잡한 Form을 만들어보며 타임리프를 사용하면 어떻게 HTML을 처리하는지 알아보자.

예제에서 사용되는 도메인 객체와 Model 코드 미리보기

@Data
public class Item {
  private Long id;
  private String itemName;
  private Integer price;
  private Integer quantity;
 
  private Boolean open; //판매 여부 (true,false)
  private List<String> regions; //등록 지역 (List)
  private ItemType itemType; //상품 종류 (Enum)
  private String deliveryCode; //배송 방식 (String)
 
  public Item() { }
  
  public Item(String itemName, Integer price, Integer quantity) {
    this.itemName = itemName;
    this.price = price;
    this.quantity = quantity;
  }
}

@Data
@AllArgsConstructor
public class DeliveryCode {
  /* FAST: "빠른 배송"
     NORMAL: "일반 배송"
     SLOW: "느린 배송"   */
    private String code;
    private String displayName;
 
}

public enum ItemType {
  BOOK("도서"), FOOD("음식"), ETC("기타");
 
  private final String description;
 
  ItemType(String description) {
    this.description = description;
  }
 
  public String getDescription() {
    return description;
  }
}

@ModelAttribute("regions")
public Map<String, String> regions() {
  Map<String, String> regions = new LinkedHashMap<>();
  regions.put("SEOUL", "서울");
  regions.put("BUSAN", "부산");
  regions.put("JEJU", "제주");
  return regions;
}
 
@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
  return ItemType.values();
}
 
@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;
}

@ 단일 체크 박스 - 기존 HTML

아래와 같이 만들었을 때, open = on 전송되며 이는 스프링 타입 컨버터에서 true, false로 바꿔준다.

• 하지만 실제 동작해보면 true는 잘 나와도 false는 나오지 않는다. null이 반환된다.

  <!-- single checkbox -->
  <div>판매 여부</div>
  <div>
    <div class="form-check">
      <input type="checkbox" id="open" name="open" class="form-check-input">
      <label for="open" class="form-check-label">판매 오픈</label>
    </div>
  </div>

• 그래서 그냥 HTML을 사용하는 경우, 아래와 같이 히든 필드를 추가하는 꼼수를 이용한다. 그러면 open 과 _open을 함께 전송하고, 서버에서 체크하여 null이 반환되어 체크박스 값이 수정되지않는 오류를 막을 수 있다.

<input type="checkbox" id="open" name="open" class="form-check-input">
<input type="hidden" name="_open" value="on"/> <!-- 히든 필드 추가 -->
<label for="open" class="form-check-label">판매 오픈</label>

@ 단일 체크 박스 - 타임리프 th:filed

그냥 th:filed 를 사용하면 id, name, value와 함께 알아서 히든필드까지 만들어준다. 너무나 편하다.

• 또한 th:filed는 open 값의 true, false에 따라 checked="checked" 속성을 알아서 추가/삭제해준다.

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

@ 멀티 체크 박스 - 타임리프 th:each

@ModelAttribute("myregions") // 해당 클래스의 모든 Controller에 myregions 모델 추가
public Map<String, String> regions() {
  Map<String, String> regions = new LinkedHashMap<>();
  regions.put("SEOUL", "서울");
  regions.put("BUSAN", "부산");
  regions.put("JEJU", "제주");
  return regions;
}

• th:each를 이용하여 각각의 <input>과 <label> 을 반복해서 만든다.
• 반복문에서 사용되는 id는 th:filed에서 [ region1, region2, region3... ]으로 자동으로 생성한다.
  다만 이 경우 <label>에서 <input>과 동일한 id를 적어주기가 어렵다.
• 그래서 타임리프 유틸에서 ${#ids} 라는 것을 제공한다. 
  ids.prev{'regions'}는 이전에 자동 생성된 *{regions} id 값을 사용하라는 의미이다.

<!-- multi checkbox -->
<form action="item.html" method="post" th:action th:object="${item}">
  <div>등록 지역</div>
      <div class="form-check form-check-inline" th:each="rg : ${myregions}">
        <input class="form-check-input" th:field="*{regions}" th:value="${rg.key}"
             type="checkbox">      <!-- th:filed="${item.regions}" -->
 
        <label class="form-check-label"
             th:for="${#ids.prev('regions')}" th:text="${rg.value}">서울</label>
      </div>
  </div>
</form>

이 HTML Form 아래와 같은 파라메타를 만든다. 이는 스프링 타입컨버터에서 적절하게 바꿔준다.

• 앞에서 설명한 것 처럼, null을 방지하기 위해 _regions라는 히든필드를 알아서 추가해준다.

# 라디오 버튼 - 타임리프

라디오 버튼도 객체를 이용해도 상관없지만, Enum을 이용해서 만들어보자.

• Enum.name()은 해당 이넘 객체의 toString() 을 반환한다. (BOOK, FOOD, ETC)
• 체크박스의 경우 null이 반환되어도 상관없어서 따로 히든필드를 만들지는 않는다.

public enum ItemType {
  BOOK("도서"), FOOD("음식"), ETC("기타");
 
  private final String description;
 
  ItemType(String description) {
    this.description = description;
  }
 
  public String getDescription() {
    return description;
  }
}

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

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

참고로 스프링-타임리프 연동기능으로 Enum을 Model을 거치지 않고 스프링 도메인 객체에 직접 접근해서 사용할 수 있다. 다만 패키지 경로를 다 입력해줘야해서 권장하는 방법은 아니다.

• ${ T(패키지 경로).values() } 로 ENUM의 모든 정보를 받아올 수 있다. 이를 스프링EL 문법이라고 한다.
• ${ @mybean.doSomthing() } 으로 컨테이너에 등록된 스프링 빈을 직접 사용할 수도 있다.

<!-- model에 담아서 전체 Enum을 전달하는 방법 -->
<div th:each="type : ${itemTypes}">
 
<!-- 스프링 객체를 읽어 전체 Enum을 가져오는 방법 -->
<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">

# Select 박스 - 타임리프

위에서 했던 것과 특별하게 다른건 없다. 그냥 사용하면 된다.

@Data
@AllArgsConstructor
public class DeliveryCode {
  /* FAST: "빠른 배송"
     NORMAL: "일반 배송"
     SLOW: "느린 배송"   */
    private String code;
    private String displayName;
 
}

  @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;
  }

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

# 스프링에서 오류, 예외처리(BindingResult)

https://jiwondev.tistory.com/169#head5

스프링의 bindingErrors를 사용하면 타임리프에서는 간결한 문법을 이용할 수 있다.

<form action="item.html" method="post" th:action th:object="${item}">
    <div th:if="${#fields.hasGlobalErrors()}">
      <p class="field-error" th:each="err : ${#fields.globalErrors()}" th:text="${err}">글로벌 오류
        메시지</p>
    </div>
 
    <div>
      <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
      <input class="form-control" id="itemName" placeholder="이름을 입력하세요"
             th:errorclass="field-error" th:field="*{itemName}" type="text">
             
      <div class="field-error" th:errors="*{itemName}">
        상품명 오류
      </div>
    </div>
    ...
</form>