Spring MVC Part 2 - 타임리프 - 스프링 통합과 폼 처리

입력 폼 처리

• th:object : 커맨드 객체를 지정한다.
  - th:object 를 사용하기 위해선 해당 객체에 대한 정보를 넘겨줘야 한다. model에 담아서 뷰에 전달한다.

• *{...} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다.

• th:field : HTML 태그의 id , name , value 속성을 자동으로 처리해준다

<form action="/main" method="post" th:object="${member}">
    <h1 class="h3 mb-3 fw-normal">로그인</h1>

    <div class="form-floating">
      <input type="text" th:field="*{userId}" class="form-control" id="floatingInput" placeholder="Id">
    </div>
  </form>

th:field 는 id , name , value 속성을 모두 자동으로 만들어준다.
- id : th:field 에서 지정한 변수 이름과 같다. id="itemName"
- name : th:field 에서 지정한 변수 이름과 같다. name="itemName"
- value : th:field 에서 지정한 변수의 값을 사용한다. value=""

만약 넘겨준 객체에 value 값이 이미 들어있다면, 해당 form에 value값을 출력까지 해준다. ex) 상품정보 수정 화면

checkbox

<!-- single checkbox -->
<div>판매 여부</div>
<div>
 <div class="form-check">
 <input type="checkbox" id="open" name="open" class="form-check-input">
 <label for="open" class="form-check-label">판매 오픈</label>
 </div>
</div>

FormItemController : item.open=true //체크 박스를 선택하는 경우
FormItemController : item.open=null //체크 박스를 선택하지 않는 경우

체크박스를 선택했을 때 스프링이 on이라는 문자를 true타입으로 변경해준다.

HTML checkbox는 선택이 안되면 클라이언트에서 서버로 값 자체를 보내지 않는다. 수정의 경우에는 상황에 따라서 이 방식이 문제가 될 수 있다. 사용자가 의도적으로 체크되어 있던 값을 체크를 해제해도 저장시 아무 값도 넘어가지 않기 때문에, 서버 구현에 따라서 값이 오지 않은 것으로 판단해서 값을 변경하지 않을 수도 있다.

이 경우를 대비해서 히든필드를 사용해 체크상태와 체크가 되지 않은 상태를 구분한다.

<input type="hidden" name="_open" value="on"/>

타임리프를 사용하면 타임리프가 이것도 자동으로 처리해준다.\

멀티 체크박스

<!-- multi checkbox -->
<div>
 <div>등록 지역</div>
 <div th:each="region : ${regions}" class="form-check form-check-inline">
 <input type="checkbox" th:field="*{regions}" th:value="${region.key}"
class="form-check-input">
 <label th:for="${#ids.prev('regions')}"
 th:text="${region.value}" class="form-check-label">서울</label>
 </div>
</div>

이렇게 thymeleaf의 반복문 기능을 통해서 여러개의 체크박스를 생성한다.

th:for="${#ids.prev('regions')}"
멀티 체크박스는 같은 이름의 여러 체크박스를 만들 수 있다. 그런데 문제는 이렇게 반복해서 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name 은 같아도 되지만, id 는 모두 달라야 한다. 따라서 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여준다.

셀렉트 박스 /라디오 버튼

나중에 추가