HTML 속성만으로 서버에 요청을 보내고, 응답으로 받은 HTML 조각을 페이지 일부에 끼워 넣게 해 주는 작은 라이브러리. 클라이언트에서 JSON(JavaScript Object Notation)을 받아 상태와 화면을 그리는 SPA(Single Page Application)와 달리, 서버가 화면 조각을 만들어 보내는 방식(하이퍼미디어, Hypermedia)으로 돌아간다.
<button hx-get="/messages" hx-target="#list" hx-swap="innerHTML">
불러오기
</button>
<ul id="list"></ul>hx-get·hx-post·hx-put·hx-delete로 요청을 보낸다. 버튼이 아니어도 어떤 요소든 된다- 응답을 넣을 곳은
hx-target으로 고른다. 지정하지 않으면 요청을 보낸 요소 자신 안에 들어간다. 넣는 방식은hx-swap(innerHTML,outerHTML,beforeend등) hx-trigger로 요청을 일으킬 이벤트를 고른다. 기본값은 요소마다 다르다(버튼은click, 입력은change)
트리거 수식어
<div hx-post="/seen" hx-trigger="mouseenter once">…</div> <!-- 한 번만 -->
<input hx-get="/search" hx-trigger="keyup changed delay:300ms" /> <!-- 입력이 멈추면 -->
<div hx-get="/news" hx-trigger="click from:#refresh">…</div> <!-- 다른 요소의 이벤트로 -->delay로 디바운스(Debounce), once로 한 번, from:으로 다른 요소에서 온 이벤트를 듣는다. [조건] 형태의 필터로 이벤트를 걸러 낼 수도 있다.
서버 템플릿(Django, Spring의 Thymeleaf 등)과 잘 맞아서 JS(JavaScript) 빌드 없이 상호작용을 더하고 싶을 때 고려할 만하다. React의 서버 컴포넌트(React Server Components)도 "서버가 UI를 만들어 보낸다"는 점에서 비슷한 방향이지만, 컴포넌트 단위로 클라이언트 상태와 섞을 수 있다는 점이 다르다. 화면 조각을 바꿔 끼우는 방식이라 선언형 프레임워크처럼 상태에서 UI를 다시 계산하지는 않는다.
출처: htmx 공식 문서 — Triggers · htmx 공식 문서 — Trigger Modifiers · Udemy — The Complete HTMX Course