지난번에 이어 3번째 기능, 자바 스크립트 인라인 기능을 알아보자 !
컨트롤러
package hello.thymeleaf.basic;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.HttpSession;
import lombok.Data;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping("/basic")
public class BasicController {
@GetMapping("/javascript")
public String javascript(Model model) {
model.addAttribute("user", new User("UserA", 10));
addUsers(model);
return "basic/javascript";
}
@Data
static class User {
private String username;
private int age;
public User(String username, int age) {
this.username = username;
this.age = age;
}
}
}
자바스크립트 인라인
타임리프에서는 자바스크립트 내에서 타임리프를 간편하게 사용할 수 있는 자바스크립트 인라인 기능을 제공한다.
자바스크립트 인라인 기능을 이용하기 위해선 다음과 같이 선언해야 한다
<script th:inline="javascript"><!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>
<!-- 자바스크립트 인라인 each -->
<script th:inline="javascript">
[# th:each="user, stat : ${users}"]
var user[[${stat.count}]] = [[${user}]];
[/]
</script>
</body>
</html>자바스크립트 인라인 기능을 사용하지 않으면 먼저 텍스트 렌더링시 [[..]] 문법사이에 넣은 모델의 데이터는 변수의 이름이 그대로 출력 된다. 우리가 기대한 것은 "userA" 처럼 문자를 기대했는데 userA가 자바크립트 내에서 변수명으로 사용되어 오류가 발생한다. (숫자는 정상 작동)
이때 인라인 기능을 사용하면 문자 타입인 경우 "" 를 자동으로 추가해주고, 특수문자 같은 경우에는 자동 익스케이프 처리가 된다.
또한 내추럴 템플릿의 특징인 HTML을 직접 열어도 동작하는 기능을 잘 활용할 수 있는데, 인라인을 적용하지 않았을 때는 정말 있는 그대로 출력을 하게 되고, 인라인 적용시 주석 부분이 제거 되고, "userA" 가 정상적으로 출력된다.
마지막 개꿀 기능은 인라인 기능 이용시 객체가 자동으로 JSON화 된다는 것이다.
인라인 미적용시 호출시 객체.toString() 이 호출 된 값이 출력되는데, 인라인 사용 후에는 JSON으로 변환 되어 출력 된다.
자바스크립트 인라인 each
인라인의 기능 중에 each문법도 지원한다.
[# th:"변수, stat : ${컬렉션}] 을 추가 해주자.
이후 stat기능을 통해 해당 객체의 값을 하나씩 반복하며 실행할 수 있다.
'Spring > Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 타임리프와 스프링의 통합 1 - 입력 폼 처리하기 (0) | 2025.06.29 |
|---|---|
| [Thymeleaf] 타임리프 기본 기능 4 - 템플릿 조각과 레이아웃 (0) | 2025.06.29 |
| [Thymeleaf] 타임리프 기본 기능 2 - 속성 값 설정, 반복, 조건부 평가, 주석, 블록 (0) | 2025.06.28 |
| [Thymeleaf] 타임리프 기본 기능 1 - 텍스트 , 표준 표현식 구문 (0) | 2025.06.28 |
| [Thymeleaf] Thymeleaf를 소개합니다 ! (0) | 2025.06.25 |