13. 타임리프 상에서 자바스크립트 사용

스프링/4. 스프링 MVC-2

13. 타임리프 상에서 자바스크립트 사용

sdafdq 2023. 8. 24. 21:45

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

    return "basic/javascript";
}

private void addUsers(Model model){
    List<User> list = new ArrayList<>();
    list.add(new User("UserA",10));
    list.add(new User("UserB",20));
    list.add(new User("UserC",30));

    model.addAttribute("users",list);
}

모델에 user과, users 넘김.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!-- 자바스크립트 인라인 사용 전 -->
<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>
</body>
</html>

[[${user.username}]] 이런 형식은 이제 모델에 있는 걸 단일 형식으로 사용할 때 이렇게 하고,

일단 저 결과를 봐보면 (페이지 소스 보기 하면 됨.)

<!-- 자바스크립트 인라인 사용 전 -->
<script>
  var username = UserA;
  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>

이렇게 나옴.

즉, 자바스크립트 인라인, <script th:inline="javascript"> 안하고 쓰면

UserA가 그냥 저기에 박혀버림. 그래서 콘솔에서도 UserA 정의 안되어있다고 오류남.

그에 반해 인라인 사용한 건 제대로 "UserA" 문자열로 넣어줌.

그리고 이제 인라인 쪽으로 보면, 저건 네츄럴 템플릿 기능으로 타임리프 자바스크립트 인라인으로 쓰면 저렇게

var username2 = /*[[${user.username}]]*/ "test username";

user.username에 값이 있으면 이걸 쓰고, 없으면 뒤의 test username을 쓴다. 이렇게 주석으로 네츄럴 템플릿 기능을 쓸 수 있다.

또 좋은 점은,

var user = [[${user}]]; 이걸 하면 인라인 사용 안하면 user.toString()이 호출되지만,

인라인은 객체를 json 형식으로 표현한다.

반복문도 가능하다.

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

[# th:each="원소로쓸이름, stat : ${users}"]

[/]

stat은 저번에 배웠던 현재 원소의 상태에 대한 정보를 가지고 있는 객체라고 보면 된다.

저렇게

var user1 = {"username":"UserA","age":10};
var user2 = {"username":"UserB","age":20};
var user3 = {"username":"UserC","age":30};

결과.

user+stat.count 해서 1~3으로 변수이름으로 들어갔고 바록 = [[${user}]] 해서 객체를 집어넣음.

인라인에선 객체가 json형식으로 집어넣어지니 저렇게

저작자표시 비영리 변경금지

'스프링 > 4. 스프링 MVC-2' 카테고리의 다른 글

15. 템플릿 레이아웃 (0)	2023.08.25
14. 템플릿 조각 (0)	2023.08.24
12. 타임리프 블록 (0)	2023.08.23
11. 타임리프 주석 (0)	2023.08.23
10. 타임리프 조건문 (0)	2023.08.22

현재글13. 타임리프 상에서 자바스크립트 사용

qwef