스프링 MVC 2 - 라디오 버튼

라디오 버튼

라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다.

• 상품 종류
  • 도서, 식품, 기타
  • 라디오 버튼으로 하나만 선택할 수 있다.

코드

FormItemController - 추가

@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
    return ItemType.values();
}

itemTypes를 등록 폼, 조회, 수정 폼에서 모두 사용하므로 @ModelAttribute를 사용하자.
ItemType.values()를 사용하면 해당 ENUM의 모든 정보를 배열로 반환한다.
-> 예 : [BOOK, FOOD, ETC]

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>

th:each="type : ${itemTypes}" : @ModelAttribute에서 반환된 것
th:field="*{itemType}" : Item.class에 있는 itemType
th:value="${type.name() : th:each="type : ${itemTypes}"에서 지정한 변수 type
th:text="${type.description}" : th:each="type : ${itemTypes}"에서 지정한 변수 type

로그 추가
log.info("item.itemType={}", item.getItemType());

실행 로그

item.itemType=FOOD: 값이 있을 때
item.itemType=null: 값이 없을 때

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>

editForm.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>

생성된 HTML

<!-- radio button -->
<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" checked="checked">
        <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>

선택한 식품(FOOD)에 checked="checked"가 적용된 것을 확인할 수 있다.
한번 선택하면 선택지를 비울 수 없기 때문에 히든 필드를 만들지 않는다.

타임리프에서 ENUM 직접 사용하기

모델에 ENUM을 담아서 전달하는 대신에 타임리프는 자바 객체에 직접 접근할 수 있다.

타임리프에서 ENUM 직접 접근

<div th:each="type : ${T(hello.itemservice.domain.item.ItemType).values()}">

스프링EL 문법으로 ENUM을 직접 사용할 수 있다.
ENUM에 values()를 호출하면 해당 ENUM의 모든 정보가 배열로 반환된다.

하지만 이렇게 사용하면 ENUM의 패키지 위치가 변경되거나 할 때 자바 컴파일러가 타임리프 컴파일 오류를 잡을 수 없으므로 추천하지 않는 방법이다.

출처 : 인프런 김영한 지식공유자님 강의 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술