3. 타임리프 기초 3

https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html

Tutorial: Thymeleaf + Spring

 

 

폼처리

th:object , th:field 를 사용하면 개발이 편리해진다.

th:object로 컨트롤러에서 보낸 객체를 담아 사용할 수 있고

th:field로 HTML 태그 속성인 ID와 NAME을 대체할 수 있다. ("*{}")

 

체크박스 해제 감지

 

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

히든 필드를 하나 만들어서, _open 처럼 기존 체크 박스 이름 앞에 언더스코어( _ )를 붙여 전송하면 체크를 해제했다고 인식할 수 있다. 

히든 필드는 항상 전송된다. 따라서 체크를 해제한 경우 여기에서 open 은 전송되지 않고, _open 만
전송되는데, 이 경우 스프링 MVC는 체크를 해제했다고 판단한다

이것도 th:field를 사용하여 처리하면 더 쉽게 처리가 가능하다.

 

체크리스트 처리

우선 체크리스트로 사용할 데이터가 필요하다.

이렇게 설정하면 기본적으로 모든 model에는 해당 regions가 담기게 된다.

 

@ModelAttribute의 특별한 사용법
등록 폼, 상세화면, 수정 폼에서 모두 서울, 부산, 제주라는 체크 박스를 반복해서 보여주어야 한다. 이렇게
하려면 각각의 컨트롤러에서 model.addAttribute(...) 을 사용해서 체크 박스를 구성하는 데이터를
반복해서 넣어주어야 한다.

 

@ModelAttribute 는 이렇게 컨트롤러에 있는 별도의 메서드에 적용할 수 있다.
이렇게하면 해당 컨트롤러를 요청할 때 regions 에서 반환한 값이 자동으로 모델( model )에 담기게 된다.

 

=> 체크리스트의 경우 JPA를 사용하여 처리해서 강의의 방식대로 하진 않았음

https://hansel.tistory.com/127

연관관계와 쿼리처리

 

이넘타입(라디오 버튼)

자바 ENUM을 사용하기
=> 하나만 선택이 가능한 경우.

th:for="${#ids.prev('###')}"

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

 

 

셀렉트 박스

 

<div>
 <div>배송 방식</div>
 <select th:field="*{deliveryCode}" class="form-select">
 <option value="">==배송 방식 선택==</option>
 <option th:each="deliveryCode : ${deliveryCodes}" th:value="$
{deliveryCode.code}"
 th:text="${deliveryCode.displayName}">FAST</option>
 </select>
</div>
<hr class="my-4">

HTML 태그 설명은 생략

th:field => 불러온 객체의 deliveryCode 필드와 매핑해줌 (해당 HTML 태그들은 폼 안에 있음을 유의)

 

 

 

이런 생성 타입은 어디에 static으로 생성해놓고 불러다 쓰는게 좋다