[Thymeleaf] 타임리프5

자바스크립트 인라인

<script th:inline="javascript">

BasicController

@GetMapping("/javascript")
public String javascript(Model model) {
    model.addAttribute("user", new User("userA", 10));
    addUsers(model);
    return "basic/javascript";
}

---

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

    //자바스크립트 내추럴 템플릿
    var username2 = /*[[${user.username}]]*/ "test username";

    //객체
    var user = [[${user}]];
</script>

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

    //자바스크립트 내추럴 템플릿
    var username2 = /*[[${user.username}]]*/ "test username";

    //객체
    var user = [[${user}]];
</script>

---

결과

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

     //자바스크립트 내추럴 템플릿
     var username2 = /*userA*/ "test username";

     //객체
     var user = BasicController.User(username=userA, age=10);
</script>

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

     //자바스크립트 내추럴 템플릿
     var username2 = "userA";

     //객체
     var user = {"username":"userA","age":10};
</script>

텍스트 렌더링

• var username = [[${user.username}]];
  • 인라인 사용 전 -> var username = userA;
  • 인라인 사용 후 -> var username = "userA";
• 개발자가 의도한 것은 “userA”라는 문자이지만, 인라인 사용 전에는 userA라는 변수 이름이 그대로 남아있어 자바스크립트 오류가 발생한다.
• 인라인 사용 후에는 문자 타입인 경우 자동으로 "를 포함해준다.

자바스크립트 내추럴 템플릿
타임리프는 HTML 파일을 직접 열어도 동작하는 내추럴 템플릿 기능을 제공한다.

• var username2 = /*[[${user.username}]]*/ "test username";
  • 인라인 사용 전 -> var username2 = /*userA*/ "test username";
  • 인라인 사용 후 -> var username2 = "userA";
• 인라인 사용 전에는 코드 그대로 해석해 내추럴 템플릿 기능이 동작하지 않고, 렌더링 내용이 주석처리 되었다.
• 인라인 사용 후 결과를 보면 주석 부분이 제거되고, 기대한 “userA”가 적용된다.

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

• var user = [[${user}]];
  • 인라인 사용 전 -> var user = BasicController.User(username=userA, age=10);
  • 인라인 사용 후 -> var user = {"username":"userA","age":10};
• 인라인 사용 전은 객체의 toString()이 호출된 값.
• 인라인 사용 후는 객체를 JSON으로 변환해준다.

인라인 each

<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
    [# th:each="user, stat : ${users}"]
    var user[[${stat.count}]] = [[${user}]];
    [/]
</script>

---

결과

<script>
    var user1 = {"username":"userA","age":10};
    var user2 = {"username":"userB","age":20};
    var user3 = {"username":"userC","age":30};
</script>

<출처 : 인프런 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술(김영한)>