[Thymeleaf] 다양한 변수 표현방법

이번 포스팅에선 타임리프에서 변수를 표시하는 다양한 방법에 대해 작성하고자 합니다. 타임리프는 Natural 템플릿이기 때문에 HTML 흐름에 자연스럽게 값을 맵핑할 수 있습니다.

1. th:text

• ${}를 이용하여 값을 맵핑할 수 있습니다.

<span class="header__text" th:text="${roomVO.roomInfo.roomName}"></span>

 

2. HTML 태그 내부에서 사용

• [[${}]] 를 이용하여 HTML 태그 내부에서 값을 맵핑할 수 있습니다.

<h4 class="chat__user">[[${room.roomName}]]</h4>

 

3. Javascript 내부에서 사용

• javascript 에서 변수로 받아 동적으로 처리할 수 있습니다.

<script th:inline="javascript">

var userName = [[${userVO.lginData.userName}]];

function getList() {
  var str = '';
  str += '<h3 class="chat__message-username">' + userName + '</h3>';
  $("#chatList").append(str);
};

</script>

 

4. img src 및 onclick 작성방법

<img 
  th:src="@{'/profile/' + ${room.profiles} + '.png'}" 
  alt="" 
  onerror="this.src='/images/default.png'"
  th:onclick="'location.href=\'/roomInfo/'+ @{${room.roomId}} + '\''">

 

감사합니다.