[Spring] Thymeleaf(타임리프) 스프링 통합과 폼

타임리프 제공 메뉴얼

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

타임리프는 스프링이 없어도 동작하지만, 스프링과 통합을 위한 다양한 기능을 편리하게 제공한다.

스프링 통합으로 추가되는 기능들

• 스프링의 SpringEL 문법 통합
• ${@myBean.doSomething()} 처럼 스프링 빈 호출 지원
• 편리한 폼 관리를 위한 추가 속성
  
  • th:object (기능 강화, 폼 커맨드 객체 선택)
  • th:field , th:errors , th:errorclass
• 폼 컴포넌트 기능
  
  • checkbox, radio button, List 등을 편리하게 사용할 수 있는 기능 지원
• 스프링의 메시지, 국제화 기능의 편리한 통합
• 스프링의 검증, 오류 처리 통합
• 스프링의 변환 서비스 통합(ConversionService)

스프링 부트가 제공하는 타임리프 설정, thymeleaf 검색 필요
https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-applicationproperties.html#common-application-properties-templating

 

th:object

예시

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

• th:object="${item}" : <form> 에서 사용할 객체를 지정한다. 선택 변수 식( *{...} )을 적용할 수 있다.
• th:field="*{itemName}"
  
  • *{itemName} 는 선택 변수 식을 사용했는데, ${item.itemName} 과 같다. 앞서 th:object 로 item 을 선택했기 때문에 선택 변수 식을 적용할 수 있다.
  • th:field 는 id , name , value 속성을 모두 자동으로 만들어준다.
    
    • id : th:field 에서 지정한 변수 이름과 같다. id="itemName"
    • name : th:field 에서 지정한 변수 이름과 같다. name="itemName"
    • value : th:field 에서 지정한 변수의 값을 사용한다. value=""
• 검증(Validation)에서 사용하면 효과가 극대화 된다. 

 

체크 박스

순수 HTML 체크박스

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

체크가 안돼있을 경우 null 값이 들어간다.

그래서 스프링 MVC 에서는

<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>

히든 필드를 추가후 체크박스를 체크하면

체크가 안돼있을 경우 _open만 들어왔을때 체크가 해제돼었다고 인식한다.

체크 박스를 체크하면 :  open=on&_open=on
스프링 MVC가 open 에 값이 있는 것을 확인하고 사용한다. 이때 _open 은 무시한다.

 

타임리프 체크박스 - 단일

th:field를 체크박스 태그 안에 지정하면 위와 같은 hidden 필드를 자동을 추가해준다.

th:field="*{open}"

 

타임리프 체크박스 - 멀티(map사용)

예시) 요구사항이 변경되서 특정 지역에서만 판매하는 기능을 넣고자한다.

이럴때  다수의 특정 뷰 들에게 지역을 담아서 넘겨줘야하는데

@ModelAttribute를 정의하면 해당 컨트롤러가 호출 되면 Model에 객체를 담기도록 하여서 공통 코드를 정의 할 수 있다/

 

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

// model에 return문에 정의된 리턴값의 객체명과 객체로 담기게 된다.

// 자주 쓰이는 컨트롤러라면 스태틱으로 외부에 정의해놓는 것을 고려!

<!-- multi checkbox --> 
<div>
    <div>등록 지역</div>
    <div th:each="region : ${regions}" class="form-check form-check-inline"> 
        <input type="checkbox" th:field="*{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')}" - 타임리프에서 동적으로 아이디가 생성될때 id값을 가져올 수 있게 해주는 기능

#ids.prev("...") || #ids.next("...")  

멀티 박스도 히든필드가 자동으로 추가된다.

 

타임리프 체크박스 - 라디오(enum 사용)

위의 멀티 체크박스와 동일하지만 type만 바꿔주면 된다.

또, 라디오버튼은 히든필드를 필요로 하지 않는다. 

라디오버튼 특성상 1개를 체크한 이상 값을 취소할 수 없기 때문이다.(null로 다시 변경못함)

 

 

타임리프 Enum 직접 접근

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

위와 같은 방식으로 모델에 넘기지 않고

<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">

타임리프에서 Enum 클래스를 직접 접근할 수 있다.

 

 

타임리프 체크박스 - 셀렉트박스 (자바 객체 사용)

위의 멀티, 라디오랑 비슷하다!

 

출처: https://tan-sog.tistory.com/90