Spring 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 2. 타임리프 - 스프링 통합과 폼
2. 타임리프 - 스프링 통합과 폼
스프링 통합으로 추가되는 기능들
- 스프링의 SpringEL 문법 통합
${@myBean.doSomething()}
처럼 스프링 빈 호출 지원- 편리한 폼 관리를 위한 추가 속성
th:object
(기능 강화, 폼 커맨드 객체 선택)th:field
,th:errors
,th:errorclass
- 폼 컴포넌트 기능
- checkbox, radio button, List 등을 편리하게 사용할 수 있는 기능 지원
- 스프링의 메시지, 국제화 기능의 편리한 통합
- 스프링의 검증, 오류 처리 통합
- 스프링의 변환 서비스 통합(ConversionService)
입력 폼 처리
th:object
: 커맨드 객체를 지정한다.*{...}
: 선택 변수 식이라고 한다.th:object
에서 선택한 객체에 접근한다.th:field
- HTML 태그의 id , name , value 속성을 자동으로 처리해준다.
<input type="text" th:field="*{itemName}" />
th:object
를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다.
1
2
3
4
5
@GetMapping("/add")
public String addForm(Model model) {
model.addAttribute("item", new Item());
return "form/addForm";
}
1
2
3
4
5
6
<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="form-control" placeholder="이름을 입력하세요">
</div>
</form>
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=""
타임리프의 체크 확인
checked="checked"
체크 박스에서 판매 여부를 선택해서 저장하면, 조회시에 checked
속성이 추가된 것을 확인할 수 있다. 이런 부분을 개발자가 직접 처리하려면 상당히 번거롭다. 타임리프의 th:field
를 사용하면, 값이 true
인 경우 체크를 자동으로 처리해준다.
References: 김영한 - [스프링 MVC 2편 - 백엔드 웹 개발 활용 기술]
This post is licensed under CC BY 4.0 by the author.