[Thymeleaf] 타임리프와 스프링의 통합 1 - 입력 폼 처리하기

스프링와 통합을 위해 타임리프에서 다양한 편의 기능을 제공한다.

타임리프는 그러한 기능으로 스프링과 밀접하게 통합될 수 있다.

[Spring] MVC 패턴 웹 페이지 1 - 요구사항 분석

이전에 진행했던 상품관리 프로젝트에서 이러한 기능을 추가하여 리팩토링해보자.

---

입력 폼 처리하기

타임리프에서는 다음과 같은 기능을 제공한다

th:object : 커맨드 객체 지정

*{..} : 선택 변수 식 -> th:object 애서 선택한 객체에 접근

th:field : HTML 태그의 id, name, value 속성을 자동 처리

 

기존 컨트롤러 추가

package hello.itemservice.web.form;

import hello.itemservice.domain.item.Item;
import hello.itemservice.domain.item.ItemRepository;
import hello.itemservice.domain.item.ItemType;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

@Slf4j
@Controller
@RequestMapping("/form/items")
@RequiredArgsConstructor
public class FormItemController {

    private final ItemRepository itemRepository;

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

    

}

먼저 해당 컨트롤러를 통해 다음 html 파일로 정보를 넘겨주자. 그리고 기존의 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>

먼저 <form> 태그안에 사용할 객체를 지정해준다(th:objext="${item}").

그리고 이후부터는 *{..} 변수식을 통해 ${item} 객체에 편리하게 접근할 수 있게 된다. -> 즉 item의 이름을 가져오고 싶다면 단순하게 *{itemname} 이라고 입력하게 되면 자동으로 ${item.itemname} 으로 해석되게 된다.

또한 th:field는 id, name, value 속성을 자동으로 만들어준다.

그래서 렌더링 전후는 다음과 같다.

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

// 변경 후
<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>

th:field 덕분에 신경 쓸 부분이 많이 줄었다.

---

그래서 결론

th:object:"${}" 로 받아온 객체를 저장해두고, 해당 스코프 내에서 *{} 로 쉽고 편하게 접근할 수 있는 편의가 생겼다.

또한, th:field 를 통해 input 태그의 속성을 모두 입력하고 관리할 필요가 줄어들어 편리함을 얻을 수 있었다.