[Thymeleaf] @태그 안에 $태그 사용하기, Expression preprocessing(전처리) "__"(밑줄 2개)

다음과 같이 포스팅된 글을 카드로 표현하였다.
해당 카드를 누르면 포스팅된 글로 이동하려는 로직을 만들기 위해 카드 내부에서 a태그로 모두를 감쌌다.

      <div class="card" th:each="list : ${response}">
        <a th:href="@{/recommends/${list.getRecommendNo()}}">
          <img class="card-bg" th:src="${list.getRecommendImageUrl()}"/>
          <div class="music-info">
            ...
          </div>

          <div class="body"></div>

          <div class="post-info">
            ...
          </div>
        </a>
      </div>
    </div>

다음과 같이 작성한 후 카드를 눌러보니

메서드를 사용하여 해당 번호를 받아오는 것이 아닌, ${list.getRecommendNo()}를 그대로 주소창에 옮기고 있었다.
이를 해결하기 위한 태그가 있으니 바로 __ (Expression preprocessing, 밑줄 2개)이다.

Expression preprocessing

타임리프 공식 문서를 확인하게 되면 Expression preprocessing부분에서 __에 대해 기능을 설명하고 있다.

@{/recommends/${list.getRecommendNo()}}

위와 같이 @와 $의 표현식을 둘 다 사용할 경우 앞에 있는 @를 먼저 사용하게 된다.
그러므로 안에 있는 표현식은 사용되지 못하고 그대로 외부로 연결되는 것이다.

<a th:href="@{/recommends/_${list.getRecommendNo()}_}">

위와 같이 Expression Preprocessing(전처리)를 사용하여 감싸주게 되면 해당 명령이 먼저 실행이 되어 글 번호를 받아오고 url을 연결해 주게 된다.

 

참조

Getting started with the Standard dialects in 5 minutes - Thymeleaf