참고
더보기
Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.
마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.
타임리프 - 라디오 버튼
라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 라디오 버튼을 자바 ENUM을 활용해서 개발해보자.
요구사항 일부
- 상품 종류
- 도서, 식품, 기타
- 라디오 버튼으로 하나만 선택할 수 있다.
FormItemController.java 내용 추가
@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
return ItemType.values();
}
- 상품 등록, 상품 상세 정보, 상품 수정에서 상품 종류에 대한 정보가 필요하다.
@ModelAttribute
를 사용해서ItemType
의 모든 상수를Model
에 저장한다.- 예시)
[BOOK, FOOD, ETC]
- 예시)
상품 등록
form/addForm.html 내용 추가
<!-- radio button -->
<div>
<div>상품 종류</div>
<div th:each="type : ${itemTypes}" class="form-check form-check-inline">
<input type="radio" th:field="*{itemType}" th:value="${type.name()}"
class="form-check-input">
<label th:for="${#ids.prev('itemType')}" th:text="${type.description}"
class="form-check-label">
BOOK
</label>
</div>
</div>
- 체크박스와 별 다를게 없다.
enum
에서name()
은 해당 열거자의 이름을 String 형태로 반환하는 메소드이다.
타임리프 렌더링 결과
<div>
<div>상품 종류</div>
<div class="form-check form-check-inline">
<input type="radio" value="BOOK"
class="form-check-input" id="itemType1" name="itemType">
<label for="itemType1" class="form-check-label">도서</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" value="FOOD"
class="form-check-input" id="itemType2" name="itemType">
<label for="itemType2" class="form-check-label">식품</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" value="ETC"
class="form-check-input" id="itemType3" name="itemType">
<label for="itemType3" class="form-check-label">기타</label>
</div>
</div>
th:field="*{itemType}"
에 의해id
와name
이 렌더링되었다.th:value="${type.name()}"
에 의해value
가 렌더링되었다.
실행 결과
라디오 버튼 선택 했을 때
HTTP 바디: itemType=FOOD // 음식 선택
로그: item.itemType=FOOD
라디오 버튼 선택 안했을 때
HTTP 바디: 아무 값도 넘어가지 않음
로그: item.itemType=null
- 체크 박스에서는 이미 체크되어 있는 경우 체크를 해제하면 아무 값도 넘어가지 않기 때문에, 히든 필드를 추가해서 문제를 해결했다.
- 반면에 라디오 버튼은 이미 선택이 되어 있다면, 수정 시에도 반드시 하나의 버튼이 선택되어야 하므로 체크 박스와 달리 별도의 히든 필드를 사용할 필요가 없다.
상품 상세 정보
form/item.html
<!-- radio button -->
<div>
<div>상품 종류</div>
<div th:each="type : ${itemTypes}" class="form-check form-check-inline">
<input type="radio" th:field="${item.itemType}" th:value="${type.name()}"
class="form-check-input" disabled>
<label th:for="${#ids.prev('itemType')}" th:text="${type.description}"
class="form-check-label">
BOOK
</label>
</div>
</div>
disabled
를 추가하고,*{itemType}
을${item.itemType}
으로 변경했다.- 체크 박스에서와 마찬가지로
th:field="${item.itemType}"
값과th:value="${type.name()"
값이 동일하면checked
속성을 추가해준다.
참고: 타임리프에서 Enum 직접 사용하기
이렇게 모델에 ENUM을 담아서 전달하는 대신에 타임리프는 자바 객체에 직접 접근할 수 있다.
기존 방법
@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
return ItemType.values();
}
타임리프에서 Enum 직접 접근
<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">
- Spring EL 문법으로 Enum에 직접 접근했다.
values()
를 호출하면 해당 Enum의 모든 상수가 배열로 반환된다.- 그런데 이렇게 사용하면 패키지 위치가 변경되거나 할때 자바 컴파일러가 타임리프까지 컴파일 오류를 잡을 수 없으므로 추천하지는 않는다.
'Spring > Spring Boot & Thymeleaf' 카테고리의 다른 글
[Spring Boot & Thymeleaf] 23. 셀렉트 박스 (0) | 2022.10.24 |
---|---|
[Spring Boot & Thymeleaf] 21. 체크 박스 다중 선택 (0) | 2022.10.24 |
[Spring Boot & Thymeleaf] 20. 체크 박스 단일 선택 (0) | 2022.10.24 |
[Spring Boot & Thymeleaf] 19. 체크 박스, 라디오 버튼, 셀렉트 박스 (1) (0) | 2022.10.24 |
[Spring Boot & Thymeleaf] 18. 타임리프 입력 폼 (0) | 2022.10.24 |
댓글