thymeleaf 템플릿에서 onClick 사용하기

Jay·2023년 10월 20일

work

목록 보기
14/16
post-thumbnail

intelliJ로 옮기면서 thymeleaf를 사용하여 새로운 프로젝트를 세팅중인데
여기에서 onClick을 사용하려니까 다소의 애로사항이 꽃폈다.
location.href같은 기본 내장함수는 잘 먹히는데(참고) 파라미터를 받아 작동하는, 내가 따로 만든 함수가 먹히질 않는거다. ${}방식으로 파라미터를 넘겨줘도 이걸 일반 텍스트로 인식하는 문제점이 있었다.

1. 껍데기함수

그래서 한번 야매 함수를 만들어봤다.
파라미터를 받아 작동하는 진짜 함수가 realFunc()라고 할 때 shellFunc()라는 껍데기함수를 만들어서
th:onclick="|shellFunc()|" 이런 식으로 onclick시에 shellFunc가 작동되도록 하고 이 shellFunc의 내용으로

function shellFunc(){
	// 파라미터 선언
  	realFunc();
}

이런 식으로 만든 것이다.
보면 알겠지만 이런 방법은 번거롭기 짝이 없고 thymeleaf라는 템플릿엔진을 사용하면서 이렇게나 야매스러운 방식을 사용하는게 맞나 싶은 회의감이 들었다..

그래서 검색에 돌입.

2. th:attr 이용

이런 포스팅을 발견했다. 역시 나만 에러나는게 아니었군..
이 방식이 일반적인가 싶어서 이래저래 찾아보니 OKKY의 이런 글도 나오고 같은 내용의 다른 글도 찾았다. 여기도!

결론적으로 이렇게 했다는 것이다:

<button th:attr="onclick=|realFunc('${param1}', '${param2}')|">

파라미터를 넘길때마다 작은따옴표를 써줘야 하는게 좀 번거롭긴한데 1번 방법보다는 훨씬 낫다고 생각한다!


thymeleaf에서 변수 넘기는 방법이랄까 아직 어색한부분이 많은데 익숙해지겠지..

profile
ㄱ이 아닌 개발자가 되고 싶은 사람

0개의 댓글