타임리프 js에서 model 데이터 받기 ( th:inline )

FRONT/Thymeleaf

간펴니 2022. 1. 17. 23:14

728x90

현재 타임리프를 사용하고 있지만, 전에는 jsp를 사용했었다.

컨트롤러에서 model을 사용해 프론트로 데이터를 보내면

key값을 이용해 ${key} 이런식으로 값을 가져올 수 있었고, js에서도 마찬가지였다.

그런데 이번에 타임리프를 사용하면서 jsp와 거의 유사한 방식으로 인해 사용해 어려움을 느끼진 않았는데,

항상 데이터를 받을때 th속성을 이용해야 한다는 것이 꽤나 불편했다.

특히 <script> 태그에서 js를 사용할 때 ${date} 로 받는게 안되고,

검색해도 나오질 않아서......(검색 키워드가 잘 못 됐었던 것 같다...)

<input> 태그에 th:value로 값을 받고, 그걸 document.getById.value로 가져오는 눈물나는(?) 개발을 하고 있었다

그러다가 <th:inline> 이란것을 알게됐다.

th:속성을 사용하지 않아도 jsp처럼 직접 데이터를 출력 할 수 있다.

방법은 아주 간단하다.

자바스크립트라면 <script th:inline="javascript" >,

그냥 body 태그 내에서 사용 할 거라면 <body th:inline="text">

이런식으로 th:inline을 넣어주면 되고, 물론 div태그 안에 넣어서 그 안에서 만 사용 할 수 있겠다.

사용은

<script th:inline="javascript">

let sessionID = [[${session.member.id}]]

let result = [[${result}]]

</script>

이런식으로, [[ ]] 를 붙어주면 된다.

** 타임리프에서 세션값을 가져오기 위해선 jsp와 다르게 앞에 session. 을 붙여야 한다.

728x90