[Spring Boot & Thymeleaf] 22. 라디오 버튼

참고

Spring Boot & Thymeleaf 시리즈는 김영한 님의 "스프링 MVC 2편 - 백엔드 웹 개발 활용 기술" 강의를 정리한 글입니다. 글에 첨부된 사진은 해당 강의의 강의 자료에서 캡쳐한 것입니다. 제 Github에만 올려뒀다가, 정보 공유와 강의 홍보(?)를 위해 블로그에도 업로드합니다.

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의

마크다운 형식으로 작성한 글을 블로그에 다시 올리는 거라 가독성이 많이 떨어집니다. 조금더 편하게 보시려면 아래의 Github repository에서 보시면 됩니다.

GitHub - Kloong1/TIL: Today I Learned.

타임리프 - 라디오 버튼

라디오 버튼은 여러 선택지 중에 하나를 선택할 때 사용할 수 있다. 라디오 버튼을 자바 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의 모든 상수가 배열로 반환된다.
• 그런데 이렇게 사용하면 패키지 위치가 변경되거나 할때 자바 컴파일러가 타임리프까지 컴파일 오류를 잡을 수 없으므로 추천하지는 않는다.