[Thymeleaf with Spring] Creating a Form (Form 작성)

(참고: Spring Boot , IntelliJ를 기준으로 작성된 글입니다.)

 

타임리프는 스프링과 통합하기 위한 매뉴얼을 제공할 정도로 스프링을 사용할 때 편리한 기능들을 많이 제공한다

이번 글에서는 Form 작성 시 어떠한 편리기능을 제공하는지 살펴보고자 한다

 

Inputs : th:field & th:object

기존에 HTML의 Form을 작성할 때 <input> 태그의 경우 id와 name 그리고 value 등의 정보들을 일일이 적어주어야 했다

타임리프가 제공하는 th:field를 사용하면 이러한 속성들을 자동으로 생성해준다, 예시와 같이 살펴보겠다

<!-- 기존 HTML -->
<input type="text" id="itemName" name="itemName" value="${item.itemName}">


<!-- Thymeleaf 사용 -->
<input type="text" th:field="${item.itemName}">

보통 id 와 name을 같게 사용하는 경우가 대부분이라고 하는데, 타임리프의 th:field를 사용하게 되면 id , name 그리고 value까지 자동으로 생성하여 속성을 정의해준다, 이로써 중복되게 작성해야 하는 부분들이 줄어들고, 스프링단에서 해당 값을 받을 때 해당 name 값이 전달되지 않으면 오류가 발생하여 문제점을 스크린 해준다

(하지만 id까지 생략하게 되면 IDE에서 오류 표시를 할 수도 있다, 참고하여 편리한 대로 사용하면 될 것 같다)

 

여기서 더 나아가서는 Form태그에 th:object를 선언하여 선택변수표현식 " *{...} "을 사용할 수 있다

<!-- 서버에서 model item (name, price)를 보냈다고 가정해보자 -->

<!-- *{...} 선택변수 표현식은 선언된 이전 객체를 기준으로 작동한다 -->
<form action="example" th:object="${item}" method="post">
    <div>
        <input type="text" id="itemName" th:field="*{itemName}">
    	<input type="text" id="itemPrice" th:field="*{itemPrice}">
    </div>
</form

model에 담겨 전달받은 item을 th:object로 작성하면 해당 폼에서 사용될 객체를 지정하여

"${item.itemName}"에서 "*{itemName}"와 같이 선택변수표현식으로 작성할 수 있다

 

Checkbox fields : th:field

체크박스의 경우 체크가 된 상태로 값이 넘어가면 "on"이라는 값이 넘어가게 된다 이때 스프링은 on이라는 값을 true로 인식하여

boolean의 형태로 자동치환해준다, 문제는 체크를 하지 않으면 아무 값도 넘어가지 않는다는 것이다

<!-- Checkbox without Thymeleaf -->
<div>
     <div class="form-check">
          <input type="checkbox" id="open" th:field="${item.open}">
          <input type="hidden" name="_open" value="on"/> <!-- hidden field -->
     </div>
</div>

이를 해결하기 위해서는 hidden 필드를 하나 만들어 ' _ '를 기존의 체크박스 id 속성 값 앞에 붙이고 value를 on으로 넘겨야 한다

이렇게 두개의 값이 넘어가면 스프링은 경우의 수를 따져 해당 체크박스가 체크가 되어야 하는지에 대한 true , false 값으로 치환한다

• open=on&_open=on : true (두 개의 값 모두 on 이면 true)

• open=&_open=on : false (_open 히든 값만 on 이면 false)

 

근데 문제는 히든필드를 항상 작성하기 매우 귀찮다는 것이다

이때 타임리프는 이런 귀찮은 문제점을 간편하게 해결해준다

<!-- Checkbox with Thymeleaf -->
<div>
     <div class="form-check">
          <input type="checkbox" id="open" th:field="${item.open}">
     </div>
</div>

th:field를 사용하여 속성을 정의해주면 체크박스의 경우 타임리프가 알아서 히든 필드를 생성하여 준다

또한 이렇게 작성된 체크박스는 클라이언트에게 응답할 때 checked="checked"라는 속성이 있어야 체크가 된 상태로 보이게 되는데

해당 체크박스의 값을 불린 값으로 Model에 담아 넘기고 타임리프의 th:field로 작성하게 되면 checked속성을 자동으로 생성해준다

 

Radio Button fields : th:field

라디오 버튼 필드 또한 th:field를 사용하면 체크박스와 같이 편리하게 사용할 수 있다

체크박스와 반대로 항상 값이 넘어가기 때문에 히든 필드는 생성되지 않는다

<!-- Radio button with Thymeleaf -->
<div th:each"type : ${itemType}">
    <input type="radio" th:field="*{type}" th:value="${item.itemType}" />
    <input th:for="${#ids.prev('type')}" th:text="${type.typeName}" />
</div>

 

Dropdown/List Selectors

셀렉트 형식의 경우도 th:field를 사용하여 편리하게 작성할 수 있다

셀렉트의 경우 <select> 태그와 <option> 태그, 두 부분으로 구성되어 있는데 아래의 예시와 함께 살펴보자

<!-- Select with Thymeleaf -->
<select th:field="*{type}">
    <option th:each="type : ${allTypes}" 
    th:value="${type}" 
    th:text="#{${'seedstarter.type.' + type}}">Wireframe</option>
</select>

여러 개 생성되는 option을 th:each를 활용하여 반복을 돌려 해당 값들을 th:value와 th:text로 정의해주면 편리하게 작성할 수 있다

 

---

개인 학습을 위해 작성되는 글입니다.

제가 잘못 알고 있는 점에 대한 지적 / 더 나은 방향에 대한 댓글을 환영합니다.

 

참조 링크:

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html