[Thymeleaf] th:object, th:field 사용법

타임리프를 사용하기 위해, 여러 블로그들을 찾다 보면 th:object로 DTO에 값을 전달해 주는 코드를 많이 보게 되었다.
무작정 th:object에 PostMapping에서 @ModelAttribute에 name으로 지정된 값을 작성하면 빨간 줄이 뜨면서 에러가 발생하였다.

th:object는 어떻게 사용할 수 있을까?

Controller

Controller에서 해당 View를 받아오는 @GetMapping이 된 웹서버에 th:object로 사용할 객체를 생성하여 Model로 저장해 주어야 th:object를 사용할 수 있다.

  @GetMapping("/writeForm")
  public String writeForm(
      @SessionAttribute(name = "loginUser", required = true) MemberLoginResponse loginMember,
      Model model) {
    ...
    model.addAttribute("request", new request());
    return "pages/write-form";
  }

그렇다면 해당 서버에 연결된 뷰에서 th:object로 데이터를 넘길 수 있다.

View

form 태그에 th:object로 model로 넘겨주었던 attributeName을 입력하여 사용하면 된다.
그리고 attributeValue에 넣었던 객체, DTO 안에 있는 변수명과 같은 이름을 사용하여 th:field="*..."로 사용하면 된다.

<div class="contents">
    <div class="board">
      <form th:action="@{/recommends}" method="post" th:object="${request}"
            enctype="multipart/form-data">
        <div class="board-top">
          <span class="board-title">게시글 작성</span>
          <span class="button-exit button">나가기 X</span>
        </div>

        <div class="board-body">
          <span class="board-body-title">제목</span>
          <span id="board-input-title"> <input name="recommendTitle" th:field="*{recommendTitle}"
                                               placeholder="제목을 입력해주세요(100자 이내)"/></span>
        </div>

        <div class="board-body" id="music-select">
          <span class="board-body-title">추천 음악</span>
          <span id="board-input-search">
            <input id="music-select-title" name="trackTitle" readonly
                   placeholder="검색 버튼을 눌러 음악을 검색해주세요"/>
            <input id="music-select-no" type="hidden" name="trackNo" th:field="*{trackNo}"
                   readonly/>
          </span>
          <span id="button-search" class="button"> 검색 </span>
        </div>

        <div class="board-body">
          <span class="board-body-title">추천 내용</span>
          <span id="board-input-content"> <textarea name="recommendContent"
                                                    th:field="*{recommendContent}"
                                                    placeholder="추천 글을 작성해주세요"></textarea></span>
        </div>

        <div class="board-body">
          <span class="board-body-title">해시태그</span>
          <span id="board-input-hashtag"><input th:field="*{hashtag}"
                                                placeholder="#으로 구분하여 해시태그를 입력해주세요(최대 3개)"/></span>
        </div>

        <div class="board-body">
          <span class="board-body-title">썸네일</span>
          <span><input id="img-file" th:field="*{image}" type="file"
                       placeholder="이미지를 업로드하세요"/></span>
          <span>
            <span class="board-body-title preview">미리보기</span>
            <img class="preview" id="preview-img" src="">
          </span>
        </div>

        <div class="board-body">
          <span class="board-body-title">유튜브 링크</span>
          <span id="youtube-link">https://youtu.be/</span>
          <span id="board-input-youtube"><input name="youtube-url"
                                                th:field="*{recommendYoutubeUrl}"
                                                type="text"/></span>
        </div>

        <div class="board-body">
          <span class="board-body-title">포인트</span>
          <span id="board-input-point">
              <input id="use-point" name="recommendPoint" placeholder="등록된 포인트는 수정할 수 없습니다."
                     th:field="*{recommendPoint}" type="number" min="0"/>
            <span id="contour">/</span>
            <span id="user-point" th:text="${userPoint}"></span>
          </span>
        </div>

        <div class="board-body">
          <span id="button-post"><input id="btn-submit" type="submit" value="작성하기" readonly></span>
        </div>
      </form>
    </div>
  </div>

request

@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
public class request {

  private String recommendTitle;
  private String recommendContent;
  private String recommendYoutubeUrl;
  private Long recommendPoint;
  private Long trackNo;
  private MultipartFile image;
  private String hashtag;
}