반응형
JavaScript에서 값 전달받기
서버에서 전달된 데이터를 JavaScript 코드에서 사용하고 싶을 때, 타임리프를 통해 참조하는 방법입니다.
01. 컨트롤러에서 값 전달
@GetMapping("/")
public String getChartData(Model model) {
List<Integer> sample = Arrays.asList(10, 20, 30, 40);
model.addAttribute("sample", sample);
return "index";
}- 임시 데이터인 sample 을 model에 붙여서 'index.html' 화면에 전달
02. 타임리프 템플릿에서 값 출력
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Example</title>
</head>
<body>
<script th:inline="javascript">
// 타임리프를 사용하여 데이터를 HTML로 출력
const sample = /*[[${sample}]]*/ [];
</script>
</body>
</html>- /*[[${sample}]]*/ 타임리프의 표현식으로, 서버에서 전달된 데이터를 타임리프가 HTML로 변환해줌
- th:inline="javascript" 속성을 추가하여 타임리프가 정상적으로 JavaScript 코드 내에서 동작을 함
- 리스트나 배열같은 데이터를 JavaScript 코드에 삽입할 때 자동으로 JSON 형식으로 변환
03. 데이터가 문자열인 경우
<script th:inline="javascript">
const message = /*[[${message}]]*/ "";
console.log(message); // 문자열 값이 출력됨
</script>
반응형
댓글