라디오버튼

학습 페이지

타임리프가 지원하는 라디오 버튼을 만들어보자…

ENUM클래스를 이용해 코드를 작성해보자.

이 친구도 전에 했던 것 처럼 @ModelAttribute를 활용할 수 있다.

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

💡 values() 는 Enum타입 클래스에서 기본적으로 사용가능한 메서드다. ENUM에 등록된 값들을 배열로 반환해준다..

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

이렇게 ENUM을 모델에 담아 전달해주자.

그리고 이를 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>

💡 참고로 타임리프에서 위처럼 type.description 등의 문법을 사용하는건 자바 프로퍼티 규약을 따르고 있다. 따라서 저 문법은 type내의 getter를 활용하는 문법이다. ENUM내에 getter가 있어야 한다.

유료버전이 놀라운건… 위의 내용도 체크해준다는 것이다. 타임리프를 적용했을때, ENUM내에 게터가 없다면 위의 문법으로 description 을 가져올 수 없다고 알려주고 있다…