[스프링 부트] JS에서 html의 변수 사용하기

스프링 부트의 thymeleaf를 이용하면 html에서도 변수를 사용할 수 있었다.

<div th:text="${num}"></div> 
<div th:text="${txt}"></div>
// 변수 num, txt에 저장된 데이터 출력

 

마찬가지로 JS에서도 thymeleaf를 이용하면 받아온 변수를 편리하게 이용할 수 있다.

 

사용을 위해서는 <script> 태그에 thymeleaf를 이용할 것을 선언해주면 된다.

 

<script th:inline="javascript"> 로 작성해준다.

 

<script>
var i =[[${num}]]; // var i=123; (O)
alert(i);

var j =[[${txt}]]; // var j=ABC; (X) 불가능 ← 문자이기 때문에 쌍따옴표가 필요하다. 
var j = "[[${txt}]]"; // var j="ABC" (O)
alert(i);
</script>

<script th:inline="javascript"> // js에서 타임 리프를 사용하겠다.
var i =[[${txt}]]; // inline을 통해 선언 후에는 쌍따옴표 없이도 "ABC"로 인식한다.
var i = "[[${txt}]]"; // (X) ""ABC""로 인식해 불가능하다.
</script>

th:inline으로 선언 이후에는 문자형에도 따옴표가 자동으로 인식된다 :D