[Thymeleaf] 반복문 사용 시 변수 사용 주의

🚨 에러

치킨3 게시글을 지우고 싶어서 삭제를 누르면, 아래와 같이 치킨1이 지워졌다.

 

action의 경로도 제대로 된 것을 확인했는데, 왜 이런 일이 일어나는 것일까?

 

🔍 분석

<div class="post" th:each="post : ${posts}" >
    <div th:each="imageFile : ${post.imageFiles}">
        <img class="post-image" th:src="|/post/images/${imageFile.storeFileName}|">
    </div>
    <div class="post-content">
        <div class="post-comment" th:text="${post.comment}"></div>
        <div class="post-date" th:text="|${post.createdDateTime.toLocalDate()} ${post.createdDateTime.getHour()}:${post.createdDateTime.getMinute()}|"></div>

        <form th:action="|/member/mypage/posts/modify/${post.id}|" method="get" id="myPost-modify">
        </form>

        <form th:action="|/member/mypage/posts/delete/${post.id}|" method="post"  id="myPost-delete" onsubmit="return confirm('정말 삭제를 원하십니까? 되돌릴 수 없습니다.');">
        </form>

        <button type="submit" form="myPost-modify" class="button-left">수정</button>
        <button type="submit" form="myPost-delete" class="button-right">삭제</button>

    </div>
</div>

문제는 게시글을 나열할 때, th:each를 사용하였고, 수정과 삭제 버튼을 배치하는 과정에서 form에 id를 사용했는데, 이 id가 게시글마다 모두 같게 되어 맨 앞에 있는 게시글이 지워진 것이었다.

 

👊 해결

<div class="post" th:each="post : ${posts}" >
    <div th:each="imageFile : ${post.imageFiles}">
        <img class="post-image" th:src="|/post/images/${imageFile.storeFileName}|">
    </div>
    <div class="post-content">
        <div class="post-comment" th:text="${post.comment}"></div>
        <div class="post-date" th:text="|${post.createdDateTime.toLocalDate()} ${post.createdDateTime.getHour()}:${post.createdDateTime.getMinute()}|"></div>

        <div class="post-modify">
            <form th:action="|/member/mypage/posts/modify/${post.id}|" method="get">
                <button type="submit">수정</button>
            </form>
        </div>

        <div class="post-delete">
            <form th:action="|/member/mypage/posts/delete/${post.id}|" method="post" onsubmit="return confirm('정말 삭제를 원하십니까? 되돌릴 수 없습니다.');">
                <button type="submit">삭제</button>
            </form>
        </div>

    </div>
</div>

button은 form 안에 넣고, div 태그와 클래스를 이용하여 배치하였다.