[Thymeleaf] JavaScript에서 Thymeleaf 변수 사용하기

타임리프는 자바스크립트에서 타임리프를 편리하게 사용할 수 있도록 자바스크립트 인라인 기능을 제공합니다.

 

사용법

<script th:inline="javascript">
/*<![CDATA[*/

이 사이에 자바스크립트 코드를 적어주고 컨트롤러에서 넘어온 변수는 [[ ${   } ]] 로 감싸줍니다.

/*]]>*/
</scrirpt>

 

1. 텍스트 렌더링

<!-- 자바스크립트 인라인 사용 전 -->
<script>
  var username = [[${user.username}]];
  var age = [[${user.age}]];
</script>

<!-- 자바스크립트 인라인 사용 전 - 결과 -->
<script>
  var username = userA;
  var age = 10;
</script>

• 인라인 사용 전 렌더링 결과를 보면 userA라는 변수 이름이 그대로 남아 있다.
• 타임리프 입장에서는 정확하게 렌더링 한 것이지만 기대한 값은 "userA"라는 문자이다.
• 결과적으로 userA가 변수명으로 사용되어서 자바스크립트 오류가 발생한다.
• 숫자 age의 경우에는 "가 필요 없기 때문에 정상 렌더링 된다.

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
  var username = [[${user.username}]];
  var age = [[${user.age}]];
</script>

<!-- 자바스크립트 인라인 사용 후 결과 -->
<script>
  var username = "userA";
  var age = 10;
</script>

• 인라인 사용 후 렌더링 결과를 보면 문자 타입인 경우 "를 포함해준다.
• 자바스크립트에서 문제가 될 수 있는 문자가 포함되어 있으면 이스케이프 처리를 해준다.
  • " => \"

 

2. 내추럴 템플릿

• 타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다.
• 주석을 활용해서 이 기능을 사용할 수 있다.

<!-- 자바스크립트 인라인 사용 전 -->
<script>
  //자바스크립트 내추럴 템플릿
  var username2 = /*[[${user.username}]]*/ "test username";
</script>

<!-- 자바스크립트 인라인 사용 전 - 결과 -->
<script>
  //자바스크립트 내추럴 템플릿
  var username2 = /*userA*/ "test username";
</script>

• 인라인 사용 전 결과를 보면 순수하게 그대로 해석을 한다.
• 내추럴 템플릿 기능이 동작하지 않고, 렌더링 내용이 주석처리되어 버린다.

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
  //자바스크립트 내추럴 템플릿
  var username2 = /*[[${user.username}]]*/ "test username";
</script>

<!-- 자바스크립트 인라인 사용 후 결과 -->
<script>
  //자바스크립트 내추럴 템플릿
  var username2 = "userA";
</script>

• 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 "userA"가 정확하게 적용된다.

 

3. 객체

• 타임리프의 자바스크립트 인라인 기능을 사용하면 객체를 JSON으로 변환해준다.

<!-- 자바스크립트 인라인 사용 전 -->
<script>
  //객체
  var user = [[${user}]];
</script>

<!-- 자바스크립트 인라인 사용 전 - 결과 -->
<script>
  //객체
  var user = BasicController.User(username = userA, age = 10);
</script>

• 인라인 사용 전은 객체의 toString()이 호출된 값이다.

<!-- 자바스크립트 인라인 사용 후 -->
<script th:inline="javascript">
  //객체
  var user = [[${user}]];
</script>

<!-- 자바스크립트 인라인 사용 후 결과 -->
<script>
  //객체
  var user = {"username":"userA","age":10};
</script>

• 인라인 사용 후는 객체를 JSON으로 변환해준다.

 

4. 자바스크립트 인라인 each

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
  [# th:each="user, stat : ${users}"]
  var user[[${stat.count}]] = [[${user}]];
  [/]
</script>
<!-- 자바스크립트 인라인 each 결과 -->
<script>
  var user1 = {"username":"userA","age":10};
  var user2 = {"username":"userB","age":20};
  var user3 = {"username":"userC","age":30};
</script>

 

참고

 

https://choiyeonho903.tistory.com/128