(Thymeleaf) DB값으로부터 체크박스 체크 여부 전환

프로젝트 중 ToDo 리스트를 담당하게 되었는데 ENUM (-> DOING 과 DONE) 형태로 저장한 type 에 따라 DOING 이면 체크박스가 해제되고 DONE 이면 체크박스가 활성화되는 과정을 타임리프를 활용하여 구현해보고자 한다.

 

<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
style="background-color: #f4f6f7;" th:each="todo : ${toDoList}">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..."/>
<s th:text="${todo.content}"></s>
<li>

일단 li 태그에서 th:each 문을 활용하여 테이블에 있는 모든 데이터들을 하나씩 가져오는 것 까지는 성공했다.

작성한 DB

실행 화면 (밀줄은 왜 그어져 있는지 모르곘다..)

---

도전 1  : th:if 와 th:unless 활용

일단 todo.type 으로 상태값을 끌어오고 타임 리프의 if & else 문을 이용해서 해결해보고자 했다.

<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
style="background-color: #f4f6f7;" th:each="todo : ${toDoList}">
<input class="form-check-input me-2" type="checkbox" 
th:if="${todo.type == 'DOING'}" value="" aria-label="..."/>
<input  class="form-check-input me-2" type="checkbox" 
th:unless="${todo.type == 'DOING'}" value="" aria-label="..." checked/>
<s th:text="${todo.content}"></s>
<li>

-> 실패

=> th:if 문을 사용해야하는 것은 맞다고 생각, 그렇다면 todo.type == 'DOING' 에서 문제가 발생한게 아닐까? 하는 생각.

=> 실제로 화면에 todo.type 만 찍어보았을 때 정상적으로 'DOING' 과 'DONE' 이 나왔다. 그러면 비교하는 과정에서의 문제라고 생각한다. type 의 타입은 ENUM 이지만 비교하는 것은 문자열이니.

 

도전 2  : Enum 의 name() 활용

ENUM 에 대해 살펴보던 중 아래와 같은 매서드가 있는 것을 알았다.

public final String name()

ENUM 의 내용을 문자열로 반환해주는 매서드이다. 위 매서드를 적용 시켜서 아래와 같이 작성해보았다.

th:if="${todo.type.name() == 'DOING'}"

-> 성공

DB 에 맞게 정상적으로 잘 불러온다