카테고리 없음

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

퓨처디벨로퍼 2022. 8. 10. 09:42

1. 타임리프 스프링 통합

타임리프는 스프링과 통합을 위한 다양한 기능을 편리하게 제공한다.

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

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

설정 방법

< build.gradle >

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

2. 입력 폼 처리

타임리프가 제공하는 입력 폼 기능을 적용해 기존 프로젝트의 폼 코드를 타임리프가 지원하는 기능을 사용해서 효율적으로 개선한다.

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

렌더링 전

<input type="text" th:field="*{itemName}" />

렌더링 후

<input type="text" id="itemName" name="itemName" th:value="*{itemName}" />

등록폼

th:object 를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트를 만들어서 뷰에 전달한다.

[FrontItemController]

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

[form/addForm.html]

<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 에서 사용할 객체를 지정한다.
*{itemName}: *{itemName} 는 선택 변수 식을 사용했는데, ${item.itemName} 과 같다.
th:field: id , name , value 속성을 모두 자동으로 만들어준다.랜더링 후
<input type="text" id="itemName" class="form-control" placeholder="이름을 입력하세요" name="itemName" value="">

3. 요구사항 추가

타임리프를 사용해서 체크박스, 라디오버튼, 셀렉트 박스 사용

4. 체크박스 - 단일1

단순 HTML 체크 박스

[resources/templates/form/addForm.html]

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

[FormItemController]

 @PostMapping("/add")
 public String addItem(Item item, RedirectAttributes redirectAttributes) {
 log.info("item.open={}", item.getOpen());
 }

[실행 로그]

FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=null //체크 박스를 선택하지 않는 경우

체크 박스를 체크하면 HTML Form에서 open=on 이라는 값이 넘어간다. 스프링은 on 이라는 문자를 true 타입으로 변환해준다.
HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않는다. 수정의 경우에는 상황에 따라서 이 방식이 문제가 될 수 있다.

히든 필드 추가

문제를 해결하기 위해서 스프링 MVC는 히든 필드를 하나 만들어서, _open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여서 전송하면 체크를 해제했다고 인식할 수있다.
체크를 해제한 경우 여기에서 open 은 전송되지 않고, _open 만전송되는데, 이 경우 스프링 MVC는 체크를 해제했다고 판단한다.

<div class="form-check">
 <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>
 </div>

[실행 로그]

FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=false //체크 박스를 선택하지 않는 경우

5. 체크박스 - 단일2

개발할 때 마다 이렇게 히든 필드를 추가하는 것은 상당히 번거롭다. 타임리프가 제공하는 폼 기능을 사용하면 이런 부분을 자동으로 처리할 수 있다.

[체크박스에 th:field="*{open}" 추가]

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

[타임리프 체크 박스 HTML 생성 결과-체크X]

 <div class="form-check">
 <input type="checkbox" id="open" class="form-check-input" name="open"
value="true">
 <input type="hidden" name="_open" value="on"/>
 <label for="open" class="form-check-label">판매 오픈</label>
 </div>

id, name,value 생성
히든 필드 생성

[타임리프 체크 박스 HTML 생성 결과-체크O]

  <input type="checkbox" id="open" class="form-check-input" disabled
name="open" value="true"
 checked="checked">

체크 박스에서 판매 여부를 선택해서 저장하면, 조회시에 checked 속성이 추가된다.
타임리프의 th:field 를 사용하면, 값이 true인 경우 체크를 자동으로 처리해준다

6. 체크 박스 - 멀티

체크 박스를 다중 선택할 수 있다.

[FormItemController]

@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로 regions를 모델에 담아 보낸다.
@ModelAttribute의 특별한 사용법:
- @ModelAttribute 는 컨트롤러에 있는 별도의 메서드에 적용할 수 있다.
- 컨트롤러를 요청할 때 regions 에서 반환한 값이 자동으로 모델( model )에 담기게 된다.

[addForm.html]

<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')}": 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여id를 만들어준다.

결과(id 뒤에 숫자가 추가)

<input type="checkbox" value="SEOUL" class="form-check-input" id="regions1" 
name="regions">
<input type="checkbox" value="BUSAN" class="form-check-input" id="regions2" 
name="regions">
<input type="checkbox" value="JEJU" class="form-check-input" id="regions3" 
name="regions">

[item.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>

멀티 체크 박스에서 등록 지역을 선택해서 저장하면, 조회시에 checked 속성이 추가된 것을 확인할 수 있다.
타임리프는 th:field에 지정한 값과 th:value의 값을 비교해서 체크를 자동으로 처리해준다.

7. 라디오 버튼
- 여러 선택지 중에 하나를 선택할 때 사용.
라디오 버튼을 자바 ENUM을 활용해 개발.

[FormItemController - 추가]
```
@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
return ItemType.values();
}
```
addForm.html로 모델을 담아 보낸다.

ItemType.values(): 해당 ENUM의 모든 정보를 배열로 반환한다.

[addForm.html - 추가]

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

*[실행 로그]**

item.itemType=FOOD: 값이 있을 때
item.itemType=null: 값이 없을 때

라디오 버튼은 이미 선택이 되어 있다면, 수정시에도 항상 하나를 선택하도록 되어 있으므로 체크박스와 달리 별도의 히든 필드를 사용할 필요가 없다.

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

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

스프링EL 문법으로 ENUM을 직접 사용할 수 있다.
이렇게 사용하면 ENUM의 패키지 위치가 변경되거나 할때 자바 컴파일러가 타임리프까지 컴파일오류를 잡을 수 없으므로 추천하지는 않는다.

8. 셀렉트 박스

여러 선택지 중에 하나를 선택할 때 사용한다.

자바 객체를 활용한 셀렉트 박스

*[FormItemController-추가]**

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

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