thymeleaf-form 사용법

입력 폼 처리

th : object : 커맨드 객체 지정

*{…} : 선택 변수식으로 th:object에서 선택한 객체 접근

thymeleaf가 name과 id를 field명으로 생성해줌

th:field 가 id, name, value 속성을 자동으로 만들어줌

ex) th:field=”*{itemName}”

• id : id=”itemName”
• name : name=”itemName”
• value : value=””

렌더링 전

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

렌더링 후

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

th:field="*{itemName}" 을 렌더링하면 id, name value가 itemName으로 생성된다.

체크 박스

<input type=”checkbox” id=”open” name=”open”>

체크 박스를 선택하는 경우 : item.open=true

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

boolean값인 true와 false로 구분하고 싶은데 체크하지 않는 경우 null로 전달되는 것을 볼 수 있다.

이 문제를 방지하기 위해 히든 필드를 추가해야 한다.

<input type=”hidden” name=”_open” value=”on”/>

_open 처럼 체크 박스 이름에 _언더 스코어를 붙여 전송하면 체크를 해제했다고 인식하여 false 값을 전달해줄 수 있다.

하지만 이런 과정은 복잡하고 thymeleaf가 모두 해결해준다.

위에서 배운 th:field를 활용하면 히든 필드의 기능들을 모두 수행해준다.

<input type="checkbox" id="open" th:field="*{open}" class="form-checkinput">

체크 박스가 여러 개인 경우

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

반복문의 th:field를 통해 여러 개를 생성할 때 id가 regions로 중복되지만 thymeleaf가 반복문을 돌 때 임의로 숫자를 넣어 regions1, regions2 와 같이 id를 생성하여 중복을 방지해준다.

id가 동적으로 생성되므로 th:for="${#ids.prev('regions')} 으로 이전 id 값을 접근할 수 있다.

코드 중복 제거

Controller에서 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;
    }

@ModelAttribute 를 추가해주면 Controller 호출 시 Model을 파라미터로 전달하는 컨트롤러 메서드에 반환한 regions 값이 자동으로 model에 담아준다.

model.addAttribute(”regions”,regions) 를 자동으로 수행해준다.

---

📚 참고 - 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 by 김영한