체크 박스의 다중(지역: 서울, 부산, 제주)

체크 박스를 하나만 선택하는 것이 아니라 여러개를 만들어놓고 중복으로 체크를 하거나 여러개 중에서 고를 수 있도록 체크박스를 여러개 만들어 볼 것이다.

 

@GetMapping("/{itemId}")
public String item(@PathVariable long itemId, Model model) {
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item", item);
	// 추가
    Map<String, String> regions = new LinkedHashMap<>();
    regions.put("SEOUL", "서울");
    regions.put("BUSAN", "부산");
    regions.put("JEJU", "제주");
    model.addAttribute("regions", regions);
	// 추가
    return "form/item";
}

 

위에 추가라고 써있는 부분의 코드가 추가가 되어야 한다. 해쉬 맵으로 3개의 데이터가 저장되어있어야 하고 이 코드는 상품 상세 페이지, 상품 등록, 상품 수정의 세 메서드에 동일하게 들어가야하는데 중복된 코드라서 개발자 입장에서는 좋지 않다.

 

 

 

@ModelAttribute("regions")
public Map<String, String> regions() {
    Map<String, String> regions = new LinkedHashMap<>();
    regions.put("SEOUL", "서울");
    regions.put("BUSAN", "부산");
    regions.put("JEJU", "제주");
    return regions;
}

 

스프링에서는 @ModelAttribute라는 기능을 제공하는데 이 기능을 사용하면 이 클래스의 어떤 메서드가 호출이 되든 자동으로 model에 담기게 된다. 따라서 위와 같이 중복된 코드를 개별 메서드에서 지울 수 있게 된다.

 

만약 addForm이 호출이 @ModelAttribute에 있는 내용이 model에 자동으로 담기게 되고 어느 메서드에서나 동일하게 담기게 되는 기능이다.

 

 

public void update(Long itemId, Item updateParam) {
    Item findItem = findById(itemId);
    findItem.setItemName(updateParam.getItemName());
    findItem.setPrice(updateParam.getPrice());
    findItem.setQuantity(updateParam.getQuantity());
    findItem.setOpen(updateParam.getOpen());
    findItem.setRegions(updateParam.getRegions());
}

오픈 여부와 같이 update 메서드에 region도 update 코드를 만들어준다.

 

 

 

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

addForm.html, editForm.html, item.html에 위의 코드를 추가해주면 된다.

이전 게시글에서 단일 체크 박스를 했을 때와 동일한데 차이점이 있다면 th:each를 통해 해쉬 맵으로 반복문을 돌렸다는 것이다.

"${#ids.prev('regions')}"는 regions의 id들이 타임리프가 생성해주기 때문에 그 아이디를 사용하는 코드이다.

 

웹 사이트의 버튼과 버튼을 눌렀을 때의 로그 출력이다.