🌿 Thymeleaf - Form 데이터 전송 (Text, CheckBox, Multi Checkbox)

Kim Dae Hyun·2021년 7월 22일

Spring Template-Engine Thymeleaf html

Thymeleaf

목록 보기

2/3

🚀
간단한 Admin 페이지 정도는 스스로 만들 수 있도록 템플릿 엔진을 공부합니다 !

🔎 Text 데이터 전송

가장 단순한 Text 데이터 전송 예제입니다.

먼저 Controller 측 코드입니다.
/test/form으로 요청이 왔을 때 폼을 들고있는 view를 랜더링시키는 메서드를 갖고 있습니다.

이 때 model에 빈 객체를 넘기는데 이 부분이 중요합니다.

@Controller
@RequestMapping("/test")
public class TestController {

    @GetMapping("/form")
    public String showForm(Model model) {
        model.addAttribute("form", new FormDto());
        return "review/form";
    }
}

다음으로 HTML 코드입니다.
form 태그의 속성으로 th:object를 사용하고 있습니다. th:object의 이름은 ${form}으로 지정하였구요.

이 때 ${form}은 컨트롤러에서 넘겨준 빈 객체입니다.
thymeleaf는 이렇게 빈 오브젝트를 받아서 값을 세팅할 수 있습니다.

th:object로 빈 오브젝트를 전달받았다면 아래 input 태그에서 th:field를 통해 해당 오브젝트의 필드에 접근할 수 있습니다.

th:field 는 이렇게 객체의 필드에 접근할 수 있는 것과 함께 여러 부가적인 기능을 제공해주니 꼭 기억해야 합니다. th:field는 *{..} 문법으로 변수를 선택할 수 있습니다.
th:field="*{name}"은 model객체로 전달된 form객체의 name필드에 접근한다는 의미입니다.

참고로 th:action 부분에 아무런 설정을 해주지 않았는데 이 때는 아래 폼을 랜더링한 url로 요청하게 됩니다.
현재 GET /test/form에서 아래 view를 랜더링 하였으니 form 요청 또한 POST /test/form으로 가게 됩니다.
단, HTTP메서드가 다르니 동일한 메서드를 호출하진 않습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <div class="py-4 text-center">
        <h2>Test Form</h2>
    </div>

    <form th:action th:object="${form}" method="post">
        <div>
            <label for="name">이름</label>
            <input type="text" id="name" th:field="*{name}" class="form-control">
        </div>

        <button class="btn-primary" type="submit">전송</button>
    </form>
</div>
</body>
</html>

아래는 전송에 사용한 객체입니다.

@Getter @Setter
public class FormDto {

    private String name;
}

이제 전송해볼께요.

post 요청을 받아줄 컨트롤러 메서드 코드입니다.
보통 받아서 비즈니스 로직을 수행 후에 다른 뷰를 랜더링 하거나 redirect 하겠지만 간단한 테스트를 위해 form으로 다시 데이터를 전달합니다.

참고로 Thymeleaf에 대한 내용은 아니지만 Model 객체를 사용하지 않고 view 단에 데이터를 넘길 수 있는 이유는 @ModelAttribute 덕분입니다. 이 어노테이션은 Model 객체를 생성하여 전달받은 객체를 넣어주는 역할까지 해줍니다.

@PostMapping("/form")
public String form(@ModelAttribute("form") FormDto formDto) {

    return "review/form";
}

결과를 보실께요.
정상적으로 Text 데이터를 전송하였습니다.

🔎 CheckBox 데이터 전송

CheckBox 부분 html 코드입니다.
일반 text데이터를 전송하는 것과 거의 동일합니다.

Thymeleaf의 th:field가 여기서 굉장히 많은 역할을 해줍니다.
내부적으로 hidden 필드를 만들어서 미체크시 문제가되는 null 문제를 해결해주는 등의 역할을 해줍니다. 랜더링 후에 브라우저에서 소스보기를 해보시면 입력하지 않은 히든타입 체크박스가 추가되어 있을 것 입니다.

<div>CheckBox Test</div>
<div>
	<div class="form-check">
		<input type="checkbox" th:field="*{tnf}" class="form-check-input">
		<label for="tnf" class="form-check-label">True or False</label>
	</div>
</div>

요청 객체를 한 번 볼께요.
타입은 간단하게 boolean으로 해주었습니다.

@Data
public class FormDto {
    private String name;
    private boolean tnf;
}

테스트 결과 ( 체크 ✔️ )

테스트 결과 ( 미 체크 ❌ )

🔎 Multi-Checkbox 데이터 전송

multi-checkbox 데이터를 받기 위한 필드를 폼 객체에 추가합니다.
여러 데이터가 들어올 수 있기 때문에 List 타입으로 해주었습니다.

@Data
public class FormDto {
    private String name;
    private boolean tnf;
    private List<String> hobbies; // multi-checkbox
}

체크박스 key값과 value 값을 초기화하여 Model 객체에 담아주기 위해 메서드 레벨 @ModelAttribute 를 사용할께요.
메서드 레벨 @ModelAttribute은 컨트롤러에 작성해주었습니다.
@ModelAttribute를 메서드 레벨에 붙이기 되면 리턴되는 값을 @ModelAttribute("name") 설정한 이름을 key값으로 하여 Model 객체에 담아줍니다.
각 매핑 메서드에서 model.addAttribute("hobbies", map); 를 한 것과 동일한 것 입니다.

@ModelAttribute("hobbies")
private Map<String, String> favorite() {
    Map<String, String> map = new LinkedHashMap<>();
    map.put("movie", "영화보기");
    map.put("music", "음악듣기");
    map.put("running", "런닝하기");
    map.put("game", "게임하기");
return map;
}

HTML 부분을 작성해줍니다.
메서드 레벨 @ModelAttribute를 통해 구성한 map을 th:each 를 사용하여 반복하며 한 개씩 체크박스를 만들어줍니다.
th:value에는 map의 key값이 담기게 되고 실제 서버로 전송되는 값이 됩니다.

label 의 for부분에서 생소한 문법이 사용되었습니다.
#{ids.prev('hobbies')} 는 th:field="*{hobbies}"에 의해 동적으로 생성되는 id 값에 맞춰서 값을 세팅해주는 기능을 제공합니다.

앞서 말했듯 th:field는 id를 자동으로 생성해줍니다.
label의 for는 input의 id와 반드시 맞춰줘야 하기 때문에 위와 같은 코드를 사용하는 것 입니다.

#ids 는 타임리프가 자체적으로 제공하는 객체로 prev, next, seq 등의 메서드를 지원합니다.

마지막으로 사용자에게 보여줄 텍스트는 앞서 구성한 map의 value값을 사용하였습니다.
자세한 사항은 레퍼런스를 참고해주세요.

<hr class="my-4">
<div>
  <div>취미 선택 (다중 선택 가능)</div>
  <div th:each="hobby : ${hobbies}" class="form-check">
    <input type="checkbox" th:field="*{hobbies}" th:value="${hobby.key}" class="form-check-input">
    <label th:for="${#ids.prev('hobbies')}" th:text="${hobby.value}"  class="form-check-label"></label>
  </div>
</div>

랜더링 결과를 한 번 보실께요.

데이터를 전달받는 컨트롤러 측에서는 동일하게 로그만 찍어보았습니다.

    @PostMapping("/form")
    public String form(@ModelAttribute("form") FormDto formDto) {
        log.info("formDto.name = {}", formDto.getName());
        log.info("formDto.tnf = {}", formDto.isTnf());
        List<String> hobbies = formDto.getHobbies();
        for (String hobby : hobbies) {
            log.info("formDto.hobby = {}", hobby);
        }

        return "review/form";
    }

결과는 아래와 같습니다.

다음에는 Radio Button과 Select Box에 대해 알아볼께요. 감사합니다 🙃

Kim Dae Hyun

이전 포스트

🌿 Thymeleaf - Fragment (공통영역처리)

다음 포스트