인프런 커뮤니티 질문&답변

시간이 많이 지났지만...혹시 다른분들에게 도움 될까해서 올립니다.

이렇게 하니

이런식으로 나옵니다!

안녕하세요. 우선 질문에 대해 정성스런 답변 정말 감사합니다.!! 현재 답변해주신 내용은 실행하고 이해했습니다. 그런데 궁금한 점이 생겼습니다.

처음 답변에서 저장된 item의 regions(도메인에 List로 선언)을 반복문을 통해 꺼내면서 모델로 등록된 regions와 비교하면서 출력을 한 것으로 보입니다. 이 의도와 코드는 이해가 됬습니다. 그런데 items.html가 아닌 item.html, editForm.html을 보면 제가 처음 질문을 업로드한 코드와 같이 모델 'regions'를 for문을 통해 별도의 반복문(th:each)없이 item의 regions를 확인 한다는 점 에서 의문이 생겼습니다. 다른 곳에서는 답변과 같이 item.regions을 확인 하는데  th:each가 필요없는는데 items.html에서는 왜 필요한 것 일까요?  

질문 읽어주셔서 감사합니다.

checked 없이 checkbox 목록만 띄워주는 방법은 

<tr th:each="item : ${items}">
    <td><a href="item.html" th:href="@{/form/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
    <td><a href="item.html" th:href="@{|/form/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
    <td th:text="${item.price}">10000</td>
    <td th:text="${item.quantity}">10</td>
    <td>
        <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">
            <label th:for="${#ids.prev('regions')}"
                   th:text="${region.value}" class="form-check-label">서울</label>
        </div>
    </td>
</tr>


ItemController.class

@GetMapping
public String items(Model model) {

    List<Item> items = itemRepository.findAll();

    model.addAttribute("items", items);
    model.addAttribute("item", new Item());
    return "form/items";
}

model.addAttribute("item", new Item()); 추가해주시면 됩니다.

안녕하세요. 성장하자님, 공식 서포터즈 OMG입니다.

질문글을 처음 보고 예상했던 방식이랑 달라서 잘못된 답변을 드렸네요.

잘못된 정보를 드려 죄송합니다.

질문을 다시 정독하고, 추가로 올려주신 글을 보고 시도해보았는데 완벽히 동작 시키기는 쉽지 않네요.

우선 제가 해결한 것까지만이라도 참고하시고 추가적으로 궁금한 사항은 새로 질문글을 올려주시면 감사하겠습니다.

items.html

<tr th:each="item : ${items}">
    <td><a href="item.html" th:href="@{/form/items/{itemId}(itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
    <td><a href="item.html" th:href="@{|/form/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
    <td th:text="${item.price}">10000</td>
    <td th:text="${item.quantity}">10</td>
    <td>
        <th:block th:each="region: ${regions}">
            <th:block th:each="sel:${item.regions}">
                <input type="checkbox" th:if="${sel.equals(region.key)}" th:text="${sel}" th:checked="checked"></input>
            </th:block>
        </th:block>
    </td>
</tr>

TestDataInit.class

Item.class 생성자 추가

결과

감사합니다.　

안녕하세요. 답변을 확인하고 강의내용을 다시 복습해보았습니다. th:field의  특성은 인자로 입력된 객체에 대해 id, name, value 속성을 자동으로 만들어 주는 것이라고 이해했습니다. 그리고 예를들어, th:field=${itemName}"가 id="itemName" name"itemName", value="itemA" 를 만들어주고 해당 상위 컴포넌트에 object 가 선언되면 *{itemName}으로 간소화 할 수 있습니다.  그리고 질문에서 언급드렸던 것처럼 멀티 체크박스편을 수강하면서  @ModelAttribute에 붙은 메소드는 컨트롤러에있는 메소드들이 실행될때마다 해당 어노테이션이 붙은 메소드로 부터 반환된 모델들이 생성된다는 것으로 이해했습니다.

그러다 item list를 조회하는 페이지인 item.html에서도 '등록 지역'에 대한 모델들이 생성이 될 것이니 해당 데이터를 나타내고자 하였습니다. 그래서 아이템을 <th:each="item" "${items}"> 태그 반복문을 통해 list로써 저장되어있는 모델 items에서 item 객체를 하나씩 받고 이 객체를 통해 regions을 받아오려고 시도를 했습니다. 해당 객체는 th:object로써 선언된 것이 아니기 때문에 th:field="*{regions}"가 아닌 th:field="${item.regions}"로 선언하였고 div 태그에 작성된 th:each="region :${regions}"를 통해 @ModelAttribute에 의해 생성된 모델로 부터 <key,value>를 region으로 받아와 th:field="${item.regions}"의 값과 매칭을해서 체크하거나 체크를 안하도록 표시하는 로직을 이해했습니다. 그리고 <lable>태그는 동적으로 생성된 컴포넌트에 대해 아이디를 부여하기 위한 로직으로 이해 했습니다. 원래 해당 예제 코드는 item.quantity 즉 아이템의 수량까지만 나타내고자 했는데 제가 그 밑에 추가를 하면서 오류가 발생했습니다. 제가 이해한 내용이 어디가 부족했는지 잘 모르겠습니다.....

<tr th:each="item : ${items}">
    <td><a href="item.html" th:href="@{/form/items/{itemId} (itemId=${item.id})}" th:text="${item.id}">회원id</a></td>
    <td><a href="item.html" th:href="@{|/form/items/${item.id}|}" th:text="${item.itemName}">상품명</a></td>
    <td th:text="${item.price}">10000</td>
    <td th:text="${item.quantity}">10</td>
    <td>
        <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>
    </td>
</tr>