[Thymeleaf] form submit시 입력 값 binding 오류

#오류 상황

API 호출 시 UserSignUpReqDto 클래스의 객체로 사용자가 입력한 값이 바인딩되어야 하는데 안되었다.

 

#원인 및 해결

• UserSignUpReqDto 클래스 필드들에 setter 메서드를 만들어주지 않아서 였다.

<td><input type="text" th:field="*{nickName}" /></td>

• 위의 코드를 보면, *{nickName}의 의미가 setNickName({value})과 동일한 기능이므로, Dto 클래스의 필드별 setter 메서드를 정의해두지 않아서 값이 바인딩되지 않았던 것이다.

 

#Thymeleaf 관련 간단 추가 정리

<form id="userSignUpForm" name="userSignUpForm" action="#"th:action="@{/user/sign-up}"th:object="${userSignUpReqDto}" method="POST">

• th:action - form 태그 사용 시 해당 경로로 요청을 보낼 때 사용한다.
• th:object - form submit을 할 때, form의 데이터가 th:object에 설정해준 객체로 받아진다.

 

<tr>
    <td>닉네임:</td>
    <td><input type="text"th:field="*{nickName}"/></td>
    <tdth:if="${#fields.hasErrors('nickName')}"th:errors="*{nickName}">닉네임</td>
</tr>

• th:field - 필드들을 매핑해주는 역할을 한다. th:object에 설정한 객체의 내부 필드와 매칭해준다.
• th:errors - 해당 필드의 error가 있는 경우 error message를 출력한다.