[Thymeleaf] 타임리프 if / unless 가 작동이 안되는 경우

타임리프의 if / unless 는 조건문을 이용하여 해당 태그를 작성할지 말지를 결정해주는 기능이다.

 

if / unless 를 사용하였는데 기능이 올바로 작동하지 않았다.

놓친 부분에 대해 알아보도록 하자.

 

[문제 HTML]

<div class="chat-body">
        <p> 메시지 개수: [[${messageList.size()}]]</p>

        <th:block th:each="message : ${messageList}">
            <p>
                메시지 ID: [[${message.id}]] |
                보낸 사람 ID: [[${message.memberId}]] |
                조건문 결과: [[${#authentication.principal.id == message.memberId}]]
            </p>

            <div th:if="${#authentication.principal.id == message.memberId}"
                 th:replace="~{message-sender.html :: messageForm(message=${message})}">
            </div>

            <div th:unless="${#authentication.principal.id == message.memberId}"
                th:replace="~{message-receiver.html :: messageForm(message=${message})}">
            </div>
        </th:block>
    </div>

 

 

[문제 해결 HTML]

<div class="chat-body">
        <p> 메시지 개수: [[${messageList.size()}]]</p>

        <th:block th:each="message : ${messageList}">
            <p>
                메시지 ID: [[${message.id}]] |
                보낸 사람 ID: [[${message.memberId}]] |
                조건문 결과: [[${#authentication.principal.id == message.memberId}]]
            </p>

            <div th:if="${#authentication.principal.id == message.memberId}">
                <div th:replace="~{message-sender.html :: messageForm(message=${message})}"></div>
            </div>

            <div th:unless="${#authentication.principal.id == message.memberId}">
                <div th:replace="~{message-receiver.html :: messageForm(message=${message})}"></div>
            </div>
        </th:block>
    </div>

 

위 두가지의 차이점은 다음과 같다.

1. th:if / th:unless 와 th:replace 가 같은 태그에 함께 사용

2. th:if / th:unless 와 th:replace 를 별개의 태그로 분리하여 사용

 

첫번째 와 같이 "th:if / th:unless 와 th:replace 가 같은 태그에 함께 사용" 된다면 조건문에 상관 없이 모든 th:replace가 생성된다.

 

 

해결 방안

th:if / th:unless 와 th:replace 를 별개의 태그로 분리하여 사용