Ch02. 타임리프(스프링 통합과 폼) - 체크 박스(멀티)

ModelAttribute Method Level

@ModelAttribute("regions") //해당 값을 사용하는 곳에서 모두 써줘야 하므로 중복이된다. //이를 해결하기위해 특별한 기능 제공
public Map<String, String > regions(){
    //모든 컨트롤러에 해당 값을 전달해준다
    Map<String, String> regions = new LinkedHashMap<>(); //map 순서를 보장
    //성능상 static 으로 해서 한번만 호출해 주는것이 좋다
    regions.put("SEOUL", "서울");
    regions.put("BUSAN", "부산");
    regions.put("JEJU", "제주");
    return regions;
}

• 각각의 컨트롤러에서 model.addAttribute(...)을 사용해서 체크 박스를 구성하는 데이터를 반복해서 넣어주어야 한다
• ModelAttribute를 메소드 레벨에 걸면 모든 Controller에 Model에 담아줄 수 있다
  • @ModelAttribute('이름') : 해당 이름으로 해당 모델이 전달된다.

HTML 수정

• AddForm.Html, EditForm.html

<!-- multi checkbox -->
<div>
    <div>등록 지역</div>
    <div th:each="region : ${regions}" class="form-check form-check-inline">
        <input type="checkbox" th:field="*{regions}" th:value="${region.key}"
               class="form-check-input">
        <label th:for="${#ids.prev('regions')}"
               th:text="${region.value}" class="form-check-label">서울</label>
    </div>
</div>

• item.html

<!-- multi checkbox -->
<div>
    <div>등록 지역</div>
    <div th:each="region : ${regions}" class="form-check form-check-inline">
        <input type="checkbox" th:field="${item.regions}" th:value="${region.key}"
               class="form-check-input" disabled>
        <label th:for="${#ids.prev('regions')}"
               th:text="${region.value}" class="form-check-label">서울</label>
    </div>
</div>

• th:for="${#ids.prev('regions')}"
  • 반복해서 HTML 태그를 생성할 때, 생성된 HTML 태그 속성에서 name 은 같아도 되지만, id는 모두 달라야 한다
  • 타임리프는 체크박스를 each 루프 안에서 반복해서 만들 때 임의로 1 , 2 , 3 숫자를 뒤에 붙여준다.
  • HTML의 id 가 타임리프에 의해 동적으로 만들어지기 때문에 으로 label의 대상이 되는 id 값을 임의로 지정하는 것은 곤란하다.
  • 타임리프는 ids.prev(...) , ids.next(...) 을 제공해서 동적으로 생성되는 id 값을 사용할 수 있도록 한다.
• 단일 체크박스와 마찬가지로 각각의 체크박스마다 _region 기능을 제공한다
• 멀티 체크 박스에서 등록 지역을 선택해서 저장하면, 조회시에 checked 속성이 추가된 것을 확인할 수 있다
  • 타임리프는 th:field 에 지정한 값과 th:value의 값을 비교해서 체크를 자동으로 처리해준다.