간단하게 스프링 프로젝트를 만들어주시고, Spring Web, Thymeleaf 라이브러리를 넣어주세요.
Controller에서 Model에 샘플 객체 담아서 index.html을 렌더링하도록 했습니다.
HomeController
@Controller
public class HomeController {
@GetMapping("/")
public String index(Model model) {
Member member = new Member("wangtak@gmail.com", "왕탁이", 26);
model.addAttribute("member", member);
return "index";
}
public static class Member {
private String email;
private String name;
private Integer age;
public Member(String email, String name, Integer age) {
this.email = email;
this.name = name;
this.age = age;
}
public String getEmail() {
return email;
}
public String getName() {
return name;
}
public Integer getAge() {
return age;
}
}
}
index.html
<!doctype html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"><!-- 1. -->
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wangtak</title>
</head>
<body>
<button type="button"
th:onclick="whoami(${member.name})"
th:text="|나는 누구일까요(원본)|"></button> <!-- 2. -->
<button type="button"
th:myName="${member.name}"
th:onclick="whoami(this.getAttribute('myName'))"
th:text="|나는 누구일까요(수정본)|"></button> <!-- 3. -->
</body>
<script th:inline="javascript"> // 4.
/*<![CDATA[*/
let member = /*[[ ${member} ]]*/;
/*]]*/
// 5.
console.log(member); // 6.
function whoami(name) { // 7.
console.log(name)
}
</script>
</html>
0. IntelliJ를 사용하고 계신다면 index.html에서 html:5 를 치신 후에 탭을 누르시면 html 기본 코드가 자동 완성 됩니다.
1. 타임리프 사용을 위해 선언하는 문구입니다.
2. 일반적으로 생각나는 타임리프에 onclick event 함수에 파라미터 할당하기
3. onclick event 함수에 정상적으로 파라미터 할당하는 방법!
4. script 태그에서 타임리프 구문을 사용하기 위해 설정하는 방식
5. Controller에서 던진 Model 객체를 받기 위한 구문
6. member 객체를 console로 찍어보면 (사진 참조)
7. javascript 사용자 정의 함수이며 name을 인자로 받아서 name을 출력
위 코드 2개로 스프링을 실행한 후에 localhost:8080으로 접속하면 다음과 같이 버튼 2개가 있습니다.
f12를 통해 개발자 도구를 열어 주시고 console에 가보시면 먼저 6번에 해당하는 member 객체의 정보가 정상적으로 출력된 것을 확인할 수 있습니다.
렌더링 되었을 때의 코드는 다음과 같습니다.
thymeleaf 문법인 th:onclick을 통해 whoami 메서드에 model에 담긴 값을 전달하고자 하였지만 정상적으로 이루어지지 않은 것을 확인할 수 있습니다. 그래서 나는 누구일까요(원본) 버튼을 눌러보면 사진과 같은 에러를 뱉습니다.
그러나 "나는 누구일까요(수정본)" 버튼에는 myName이라는 attribute가 추가되었고, 그 결과 나는 누구일까요(수정본) 버튼을 눌러보면 다음 사진처럼 우리가 원했던 매개변수가 잘 도착한 것을 확인할 수 있습니다.
정리
※ onclick 이벤트 함수에 매개변수를 설정하려면 th:parameterName="${member.name}" 과 같은 방식을 사용하면 됩니다.
※ th:blabla 는 blabla 처럼 개발자가 원하는 이름으로 변수 이름을 지정하면 됩니다.
※ this.getAttribute가 빨간 밑줄이 나오더라도 정상적으로 작동합니다.
※ th:text를 사용할 때 중간에 띄워쓰기가 있다면 | (or) 를 양쪽에 붙여주시면 됩니다.
'Spring > Thymeleaf' 카테고리의 다른 글
| Thymeleaf - 페이징 화면 그리기 (0) | 2022.08.23 |
|---|---|
| Thymeleaf - Ajax Response 값 활용하여 View 갱신하기 (2) | 2022.03.04 |
| 나를 위한 Thymeleaf 특징 정리 (0) | 2022.02.25 |
