타임리프 활용

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를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다. 등록 폼이기 때문에 데이터가 비어있는 오브젝트를 뷰에 전달한다.

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

 

등록 폼 예제

<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>
	<div>
		<label for="price">가격</label>
		<input type="text" id="price" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
	</div>
	<div>
		<label for="quantity">수량</label>
		<input type="text" id="quantity" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요"> 
   	</div>

 

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

id 속성을 제거해도 th:field가 자동으로 만들어준다.

 

렌더링 전

<input type="text" id="itemName" th:field="*{itemName}" class="form-control" placeholde="이름을 입력하세요">

렌더링 후

<input type="text" id="itemName" class="form-control" placeholder="이름을 입력하세요" name="itemName" value="">

 

 

수정 폼

@GetMapping("/{itemId}/edit")
public String editForm(@PathVariable Long itemId, Model model){
	Item item = itemRepository.findById(itemId);
    model.addAttribute("item",item);
    return "form/editForm";
}

 

 <form action="item.html" th:action th:object="${item}" method="post">
      	<div>
		<label for="id">상품 ID</label>
          	<input type="text" id="id" th:field="*{id}" class="form-control"readonly>
	  </div> 
      <div>
			<label for="itemName">상품명</label>
          	<input type="text" id="itemName" th:field="*{itemName}" class="form-control">
	  </div> 
	  <div>
 			<label for="price">가격</label>
          	<input type="text" id="price" th:field="*{price}" class="form-control">
      </div>
	  <div>
			<label for="quantity">수량</label>
          	<input type="text" id="quantity" th:field="*{quantity}" class="form-control">
	  </div>

id, name, value를 모두 신경써야 했는데, 많은 부분이 th:field덕분에 자동으로 처리되는 것을 확인할 수 있다.

 

렌더링 전

<input type="text" id="itemName" th:field="*{itemName}" class="form-contorl">

렌더링 후

<input type="text" id="itemName" class="form-control" name="itemName" value="itemA">