[Spring] 타임리프 th:each index를 javascript로 넘기기



Controller에서 Model에 담아 전달한 값을 타임리프(Thymeleaf)를 사용하여 다루곤 합니다. Model에 List를 담아 전달하면 타임리프에서 th:each 문법을 사용하여 여러 개의 값을 편하게 출력할 수 있습니다.

 

문제 발생

저는 List를 담고 있는 Model의 값을 꺼내어 타임리프에서 다루고자 하였습니다. 코드는 다음과 같습니다.

 

html

Model에 담긴 List의 값을 하나씩 꺼내어 작성자와 작성일자를 출력하고 있습니다. 빨간 박스를 보면 id값으로 commentCreatedDate와 commentContent를 사용하고 있습니다. 여기서 잘못된 것이 있는데 List의 크기가 2개 이상이면 동일한 id값이 2번 이상 사용됩니다. id는 유일해야 하기 때문에 잘못된 코드입니다.

 

javascript

html에서 삭제버튼을 누르면 아래 함수가 호출됩니다. document.getElementById()를 사용하여 html의 id에 해당하는 값을 가져오고 있습니다. 위에 말했듯이 List의 크기가 2개 이상이면 동일한 id를 갖는 태그에 담긴 값을 가져오게 됩니다.

 

화면 출력

저는 내용이 3인 댓글을 삭제를 하였습니다. 그런데 삭제 후 결과를 보면 내용이 2인 댓글이 삭제되었습니다. 동일한 id를 갖는 태그에 접근하여 삭제를 시도하기 때문에 올바르지 않은 결과가 보이게 됩니다.

삭제 전

삭제 후

해결 방법

결론은 중복되는 id를 사용하였기 때문에 문제가 발생하였습니다. 따라서 타임리프에서 제공하는 State 기능을 사용해야 합니다.

 

html

th:each를 사용할 때 State를 추가합니다. State란 타임리프에서 제공하는 상태변수로써 현재 상태를 추적할 수 있는 기능을 제공합니다.

• index: 현재 반복 인덱스 (인덱스 시작 번호: 0)
• count: 현재 반복 인덱스 (인덱스 시작 번호: 1)
• size: 리스트 크기
• first: 첫 번째 반복인지 여부
• last: 마지막 반복인지 여부

저는 commentState를 추가하여 현재 인덱스를 추적하였습니다. 각 태그의 id에 반복문의 인덱스를 추가하여 id가 중복이었던 문제를 해결하였습니다.

 

javascript

자바스크립트에서 인덱스를 전달받아 해당 index를 갖는 id에 접근할 수 있게 되었습니다.

 

출력 화면

삭제 전

삭제 후

결론

타임리프(thymeleaf)에서 제공하는 State 기능을 사용하면 됩니다. 

State가 제공하는 기능은 다음과 같습니다.

• index: 현재 반복 인덱스 (인덱스 시작 번호: 0)
• count: 현재 반복 인덱스 (인덱스 시작 번호: 1)
• size: 리스트 크기
• first: 첫 번째 반복인지 여부
• last: 마지막 반복인지 여부