타임 리프 - 스프링 통합과 폼

타임리프 스프링 통합

스프링 통합 메뉴얼: 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)

설정 방법

타임리프 템플릿 엔진을 스프링 빈에 등록
- https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#the-springstandarddialect
타임리프용 뷰 리졸버를 스프링 빈으로 등록하는 방법
- https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#views-and-viewresolvers
스프링 부트에서는 build.gradle에 아래의 문장을 추가하면 됨
```
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
```
스프링 부트가 제공하는 타임리프 설정, thymeleaf 검색 필요
- https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-applicationproperties.html#common-application-properties-templating

입력 폼 처리

<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=""
  - 참고로 해당 예제에서 id 속성을 제거해도 th:field 가 자동으로 생성

체크 박스 - 단일

HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않음
스프링 MVC에서는 _open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 체크를 해제했다고 인식할 수 있음
- <input type="hidden" name="_open" value="on"/>
- 체크 박스 선택: open, _open 전송
- 체크 박스 미선택: _open만 전송
타임리프를 사용할 경우 히든 필드를 자동으로 생성

체크 박스 - 멀티

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

각각의 컨트롤러에서 model.addAttribute(...)을 사용하여 체크 박스를 구성하는 데이터를 반복해서 넣는 대신 @ModelAttribute를 컨트롤러의 메서드에 적용
해당 컨트롤러를 요청할 때 regions에서 반환된 값이 자동으로 model에 담김
- 타임리프는 체크박스를 each 루프 안에서 만들 때 임의로 숫자를 각각의 id 뒤에 부여
- ids.prev(...), ids.next(...)로 동적으로 생성되는 id 값을 사용할 수 있음 ex) th:for="${#ids.prev('regions')}"

라디오 버튼

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

체크 박스와 같이 @ModelAttributes 사용 가능
ENUM.values()를 사용하면 해당 ENUM의 모든 정보를 배열로 반환

타임리프에서 ENUM 직접 사용하기

<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">
스프링EL 문법으로 ENUM을 직접 사용
패키지 위치가 변경될 경우 자바 컴파일러가 타임리프의 컴파일 오류를 잡을 수 없으므로 권장하지 않음

셀렉트 박스

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

@ModelAttributes가 있는 deliveryCodes() 메서드는 컨트롤러가 호출될 때마다 사용되므로 deliveryCodes 객체도 계속 생성됨
이러한 부분은 미리 생성해두고 재사용하는 것이 더 효율적