Thymeleaf 주요 기능 4

폼 데이터 처리 - th : object , th : field

th : object , th : field 는 폼 데이터 바인딩에 주로 사용되는 속성이다.

 

th : object 

컨트롤러에서 전달받은 모델 객체를 현재 폼에 바인딩하는 속성

• 즉, 컨트롤러에서 전달 받은 모델 객체를 HTML의 데이터로 사용할 수 있게끔 도와주는 속성이다.

th : field

th : object로 받은 객체의 필드와 폼의 입력 필드를 연결 시키는 속성

• 주로 ' *{...} ' 형태의 선택 변수 식을 활용하여 th : object에서 선택한 객체의 필드에 접근한다.
• HTML태그의 id, name, value 속성을 자동으로 처리해준다.

예제)

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

• th:object="${item}" : <form>에서 사용할 모델 객체(item)를 바인딩한다. => 선택 변수 식 (*{...})을 적용할 수 있다.
• th:field="*{itemName}"
  • *{itemName} == ${item.itemName}
• th:field는 자동으로 id, name, value를 생성한다.
  • id = "itemName"
  • name = "itemName"
  • value = "itemName"

th:field로 타임리프가 렌더링 되었을 때 HTML 태그의 id, name, value 속성이 자동으로 생성되었다.

 

체크박스 

타임리프에서 체크박스를 사용 시, value 값을 ' on '으로 제공하는데 스프링은 이 문자를 true 타입으로 변환해준다. (스프링 타입 컨버터가 이 기능을 수행한다.)

 

체크 해제를 인식하기 위한 히든 필드

HTML의 체크박스는 선택이 되지 않으면 값 자체를 서버에 전송하지 않는다. 이로 인해 서버에서는 클라이언트에서 값을 넘기지 않기 때문에 체크에 대한 상태 여부를 알 수 없다. 이러한 방식은 데이터 수정의 경우 문제가 될 수 있다.

 

이런 문제를 해결하기 위해 스프링 MVC에서는 hidden 태그를 만들어 체크 여부에 대한 상태를 서버에서 알 수 있게끔 해준다. 이때, hidden 태그의 name 속성은 체크박스 태그의 name + '_'(언더스코어)를 붙여 사용한다.

예제)
<input type="checkbox" id="open" name="open" class="form-check-input">
<input type="hidden" name="_open" value="on"/> <!-- 히든 필드 추가 -->

• 체크 박스 체크 : open = on & _open = on 
  • 체크 박스를 체크하면 스프링 MVC가 open 에 값이 있는 것을 확인하고 사용한다. 이때 _open 은 무시한다.
• 체크 박스 미체크 : _open = on
  
  • 체크 박스를 체크하지 않으면 스프링 MVC가 _open 만 있는 것을 확인하고, open 의 값이 체크되지 않았다고 인식한다.
  • 이를 통해 서버에서는 값이 넘어오지 않았다는 null로 인식하지 않고 false로 인식할 수 있다.

 

타임리프의 th : field를 활용하면 위의 과정을 자동으로 렌더링 해주어 개발자에게 편의성을 제공해준다.

타임리프 th:field 활용하여 체크박스 코드 작성
<input type="checkbox" id="open" th:field="*{open}" class="form-check-input">
<label for="open" class="form-check-label">판매 오픈</label>

HTML 생성 결과 코드

hidden 태그(_open)가 자동으로 생성된 것을 볼 수 있다.

 

 

멀티 체크박스

멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다. 그런데 문제는 이렇게 반복해서 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name 은 같아도 되지만, id 는 모두 달라야 한다.

 

타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여준다.

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

실행 결과

임의로 1 , 2 , 3 숫자를 뒤에 붙여준 것을 볼 수 있다.

• 이렇게 임의로 HTML의 id가 타임리프에 의해 동적으로 만들어지기 때문에 id 값을 사용하는 태그에서 적용해야 될 경우, 문제가 발생할 수 있다. 이러한 문제를 방지하기 위해 타임리프에서는 다음을 제공한다.
  • ids.prev(...) 
  • ids.next(...)
• 위의 식을 사용하면 id가 동적으로 생성되어도 이에 맞춰 다른 태그에서도 동일한 id 값으로 사용할 수 있다.

 

라디오 버튼

체크 박스는 수정 시 체크를 해제하면 아무 값도 넘어가지 않기 때문에, 별도의 히든 필드로 이런 문제를 해결했다. 라디 오 버튼은 이미 선택이 되어 있다면, 수정 시에도 항상 하나를 선택하도록 되어 있으므로 체크 박스와 달리 별도의 히든 필드를 사용할 필요가 없다.