Java

[Thymeleaf] 컨트롤러에서 전달한 값을 JavaScript에서 사용하기

PEAZH 2024. 10. 23. 16:05
반응형

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>

 

반응형