[SpringBoot] thymeleaf form 사용

thymeleaf를 공부하는 중에 form태그를 이용하여 데이터를 주고 받는 과정에서 고민하고 검색하여 해결했던 내용을 기록한것 입니다.

자세한 내용은 공식 홈페이지를 참고해주세요

공식홈페이지로 이동

일단 thymeleaf를 이용한 form태그에서 자주 사용하는 대해서 간단히 설명하겠습니다.

form

간단하게 form 태그에서 사용할 수 있는 3가지 입니다. 저는 이 3가지를 사용하였습니다.

th:action

• form data를 보낼 url를 설정

th:object

• form data를 담을 객체를 설정

th:field

• 담는 객체의 필드을 동적으로 매핑 (사용시 객체의 필드로 id과 name이 자동생성)

example

먼저 form태그를 사용할 페이지에 비어있는 객체를 전달해야합니다.
controller

@GetMapping("/writeBbs")
    public String writeBbs(Model model, BbsRequestDto requestDto){
        model.addAttribute("requestDto",requestDto);
        return "writeBbs";
    }

Model에 form data를 담을 객체를 비어있는 객체인 BbsRequestDto를 담아서 form태그를 이용할 writeBbs.html로 전달하였습니다.
writeBbs.html

<form th:action="@{/api/bbs/write}"  th:object="${requestDto}" method="post" >
    <table class="table">
        <tbody>
        <tr>
            <td>제목</td>
            <td><input type="text" th:field="*{title}"></td>
        </tr>
        <tr>
            <td>작성자</td>
            <td><input type="text" th:field="*{writer}"></td>
        </tr>
        <tr style="height: 300px;">
            <td>내용</td>
            <td><input type="text" th:field="*{contents}"></td>
        </tr>
        </tbody>
        <button type="submit">등록</button>
    </table>
    </form>

해당 writeBbs.html 보시면 th:action으로 form data를 보낼 url를 지정하고 있고,또한 th:object에는 controller에서 받아온 빈객체인 requestDto를 지정하고 있습니다.

ps. intellij에서만 제공하는 기능인지는 모르겠지만 빈객체를 보내면 담은 객체의 이름을 자동완성으로 제공해줍니다. 처음에 객체를 안보내서..얼마나 고생했던지..

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class BbsRequestDto {
    private String title;
    private String contents;
    private String writer;
}

또한 th:field에서는 받아온 객체의 필드변수명을 입력해주셔야 form data를 보낼때 자동으로 매팅을 해줍니다.

여기 부분에서 검색을 많이 했던 부분입니다. 처음에 Dto 작성했을때 Setter를 추가하지 않었는데요 그 이유는 Dto setter를 작성하지 않아도 @ReqeustBody이용하면 json으로 보낼때는 Jackson2HttpMessageConverter가 java Object로 변환해서 넣어준다고..
그걸로 모르고 setter를 안썼더니 controller에서 데이터를 못받아준거 같습니다. form data를 받는 @RequestBody가 아닌 @ModelAttribute이용해야 해서 그런거 같습니다.

**controller**

    @PostMapping("/api/bbs/write")
    public String createBbs(@ModelAttribute("requestDto") BbsRequestDto requestDto){
       Bbs bbs = new Bbs(requestDto);
       bbsRepository.save(bbs);
       return "redirect:/";
    }

다음은 form data를 받아서 JPA로 DB에 insert해주는 소스입니다.

---

긴글 읽어주셔서 감사합니다. 혼자 공부하면서 적은 내용이라 틀린 부분이 많을거 같은데 피드백 주시면 공부후에 수정하도록 하겠습니다. 감사합니다.