[오늘의 오류_회사]타임리프로 onclick 이벤트에서 전달받은 값을 JS로 넘기는 법/th:onclick과 onclick의 차이

<오류 발생>

현재 만들고있는 프로젝트의 html을 js와 분리 작업을 진행하던 중 controller부터 전달받은 데이터를 js로 넘기는 것이 잘 안됐었다. 스크립트를 선언하고 넘겨도 되지만 html을 최대한 깔끔하게 하고싶어 방법을 찾던 중 타임리프를 이용하면 가능했었다.

 

<오류 해결>

th:onclick="deletePost([[${post.cd}]])

이런식으로 타임리프를 이용하면 쉽게 값을 JS단으로 넘길 수 있다.

 

 

<th:onclick과 onclick의 차이>

1줄요약 : 서버에서 가져오는 값이 있을때는 th:onclick 브라우저의 이벤트 발생은 onclick

 

이하 원문

th:onclick과 onclick의 차이점은 HTML과 Thymeleaf의 렌더링 방식에서 차이가 있습니다.

일반적으로 HTML에서 onclick은 클라이언트 사이드에서 동작하는 이벤트 처리기를 지정하기 위해 사용됩니다. onclick 속성은 브라우저에 의해 직접 처리되며, 클라이언트 측 JavaScript 코드를 실행합니다.

반면에, Thymeleaf의 th:onclick 속성은 서버 측에서 실행됩니다. 서버 측에서 실행되는 이유는 Thymeleaf가 뷰를 생성하기 전에 타임리프 표현식을 평가하기 때문입니다. 이 속성은 클라이언트에서 이벤트가 발생하면 서버 측에 있는 Thymeleaf 코드를 실행하고 이벤트를 처리합니다.

따라서, th:onclick은 클라이언트 측에서 JavaScript 코드를 실행하지 않고 서버에서 동적으로 생성된 HTML 또는 다른 리소스를 반환합니다. 반면에 onclick은 클라이언트 측에서 실행되며, 서버에서 동적으로 생성된 HTML 또는 다른 리소스를 반환하지 않습니다.

그러므로, 브라우저에서 실행되는 클라이언트 측 이벤트 처리기를 작성할 때는 onclick 속성을 사용하고, 서버 측에서 실행되는 이벤트 처리기를 작성할 때는 th:onclick 속성을 사용하는 것이 좋습니다.