[Q] onclick, th:onclick, href, th:href 의 차이점은 무엇일까?

onclick, th:onclick, href, th:href 의 차이점은 무엇일까?

웹 애플리케이션을 개발을 공부하면서 뷰 페이지를 만들 때, 어떤 경우에는 onclick을 사용하고 어떤 경우에는 th:onclick을 사용합니다. href도 마찬가지입니다.

특히 스프링/Thymeleaf 환경에서는 기본 HTML 속성과 Thymeleaf 전용 속성이 혼합되어 사용되는데, 이 둘의 차이를 명확히 이해하는 것이 유지보수와 확장성 측면에서 매우 중요합니다.

 

이번 글에서는 onclick과 href의 기본 개념은 물론, Thymeleaf를 사용할 때 제공되는 th:onclick과 th:href 속성이 어떻게 동작하는지, 그리고 언제 어떤 것을 사용해야 하는지를 알아보겠습니다.

---

onclick – 인라인 자바스크립트 이벤트 처리

기본 개념

HTML 요소(예: <button>, <a>)에 직접 작성하는 속성으로, 사용자가 해당 요소를 클릭할 때 실행할 자바스크립트 코드를 지정합니다.

• 동작 원리
  브라우저는 요소에 지정된 자바스크립트 코드를 즉시 실행합니다. 보통 간단한 효과(예: alert, DOM 조작, 페이지 이동 등)를 구현할 때 사용됩니다.

코드 예제

<!-- 버튼 클릭 시 알림창을 표시하는 예제 -->
<button onclick="alert('버튼이 클릭되었습니다!')">클릭</button>

장점 및 단점

• 장점
  • 작성이 간단하여 빠르게 동작을 확인할 수 있습니다.
  • 작은 스크립트나 단일 기능 구현에 적합합니다.
• 단점
  • HTML 코드 내에 자바스크립트가 혼재되어 코드 분리와 재사용성이 떨어집니다.
  • 여러 요소에 동일한 기능을 적용할 경우 중복 코드가 발생할 수 있습니다.
  • 유지보수가 어려워지며, 대규모 프로젝트에서는 외부 스크립트 파일로 분리하는 것이 권장됩니다.

 

---

th:onclick – Thymeleaf를 이용한 동적 이벤트 처리

기본 개념

Thymeleaf 템플릿 엔진에서 제공하는 속성으로, 서버 사이드에서 동적 데이터를 포함해 자바스크립트 이벤트 코드를 생성할 수 있도록 합니다.

• 동작 원리
  th:onclick은 서버에서 템플릿을 렌더링할 때 Thymeleaf 표현식(예: ${...})을 평가하여 최종 HTML 코드의 onclick 속성에 값을 삽입합니다.

코드 예제

<!-- 회원 삭제 버튼 예제: 회원의 고유 ID(member.idx)를 동적으로 삽입 -->
<button th:onclick="|location.href='/member/delete/' + ${member.idx}|">
    회원 삭제
</button>

여기서 | ... | 인라인 표현식을 사용하면, 문자열 내에서 단순히 자바스크립트 코드를 작성하면서 동적 데이터를 결합할 수 있습니다.

 

렌더링 결과는 예를 들어 onclick="location.href='/member/delete/123'"와 같이 생성됩니다.

장점 및 단점

• 장점
  • 서버에서 동적으로 데이터를 처리하므로, URL이나 이벤트 로직에 동적 값을 쉽게 삽입할 수 있습니다.
  • 애플리케이션의 컨텍스트 경로나 데이터 변경에 따라 자동으로 반영되므로 유지보수성이 높습니다.
• 단점
  • Thymeleaf를 사용해야 하므로, 정적 HTML 파일에서는 사용할 수 없습니다.
  • 복잡한 자바스크립트 로직을 처리할 때는 여전히 외부 스크립트로 분리하는 것이 좋습니다.

 

---

href – 정적인 링크 연결

기본 개념

<a> 태그의 기본 속성으로, 사용자가 링크를 클릭하면 지정된 정적인 URL로 이동합니다.

• 동작 원리
  HTML 코드 내에 직접 작성된 URL로 브라우저가 이동하며, 페이지 이동 시 브라우저 주소창에 해당 URL이 그대로 표시됩니다.

코드 예제

<!-- 정적 링크 예제: 사용자가 클릭하면 /home 페이지로 이동 -->
<a href="/home">홈으로 이동</a>

장점 및 단점

• 장점
  • 코드가 간단하고, SEO(검색 엔진 최적화)와 접근성 측면에서 유리합니다.
  • 정적인 URL은 브라우저와 스크린 리더가 쉽게 인식합니다.
• 단점
  • URL이 고정되어 있어, 동적 데이터나 컨텍스트 경로를 반영하기 어렵습니다.
  • 동적 파라미터가 필요한 경우 별도의 조작이 필요합니다.

 

---

th:href – Thymeleaf를 이용한 동적 링크 생성

기본 개념

Thymeleaf 템플릿 엔진의 속성으로, 동적 URL을 생성할 때 사용됩니다.
@{…} 구문을 사용해 애플리케이션의 컨텍스트 경로나 동적 파라미터를 자동으로 처리합니다.

• 동작 원리
  서버 사이드에서 템플릿을 렌더링할 때, th:href 내의 표현식을 평가하여 최종 HTML에 올바른 href 속성을 채워 넣습니다.

코드 예제

<!-- 컨텍스트 경로 자동 처리 예제 -->
<a th:href="@{/home}">홈으로 이동</a>

<!-- 동적 파라미터를 포함한 링크 예제: 회원 상세보기 -->
<a th:href="@{/user/detail(id=${user.id})}">회원 상세보기</a>

• 첫 번째 예제는 배포 경로가 바뀌더라도 올바른 URL을 생성합니다.
• 두 번째 예제는 URL 파라미터에 동적으로 값을 삽입하여 특정 회원의 상세 페이지로 이동할 수 있게 합니다.

장점 및 단점

• 장점
  • 컨텍스트 경로, 파라미터 등 동적 데이터를 자동으로 반영하여 URL을 생성하므로, 코드가 깔끔하고 유지보수가 용이합니다.
  • 애플리케이션 구조 변경에 유연하게 대응할 수 있습니다.
• 단점
  • Thymeleaf 템플릿 엔진에 의존하므로, 단순 정적 HTML에서는 사용할 수 없습니다.
  • 동적 데이터가 많거나 복잡한 URL 로직을 다루어야 할 경우, 템플릿 내부 표현식이 복잡해질 수 있습니다.

---

추가 고려 사항

• 코드 분리
  • 가능하면 인라인 이벤트(예: onclick)보다는, 외부 자바스크립트 파일이나 이벤트 리스너(addEventListener)를 통해 이벤트 핸들링 로직을 분리하는 것이 좋습니다.
• 동적 데이터 처리
  • Thymeleaf의 th:onclick과 th:href를 사용하면 서버에서 데이터에 따라 동적으로 이벤트나 링크를 생성할 수 있으므로, URL이나 파라미터가 자주 변경되는 경우 효과적입니다.
• 접근성 및 SEO
  • 중요한 내비게이션 링크는 정적 href나 th:href를 사용하는 것이 검색 엔진과 스크린 리더가 링크를 올바르게 인식하도록 하는 데 유리합니다.
• 보안 고려
  • 동적 데이터 삽입 시, XSS(크로스 사이트 스크립팅)와 같은 보안 이슈를 방지하기 위해 Thymeleaf의 자동 이스케이프 기능을 적극 활용해야 합니다.
• 유지보수
  • 템플릿 내에 복잡한 로직을 넣기보다는, 가능한 한 간단하게 유지하고 복잡한 비즈니스 로직은 컨트롤러나 서비스 계층에서 처리하는 것이 좋습니다.

 

---

정리

웹 애플리케이션에서 이벤트 처리와 페이지 이동은 사용자 경험을 좌우하는 중요한 요소입니다.

• onclick과 href는 기본 HTML 속성으로, 각각 자바스크립트 이벤트 처리와 정적 링크 연결에 사용됩니다.
• th:onclick과 th:href는 Thymeleaf 템플릿 엔진의 기능을 활용해, 서버 사이드에서 동적 데이터를 포함한 이벤트 처리 코드와 URL을 생성할 수 있도록 도와줍니다.

상황에 맞게 올바른 속성을 선택하고, 코드 분리와 보안, 접근성 등을 고려하면 유지보수성이 높고 유연한 웹 애플리케이션을 개발할 수 있습니다.