[HTMX] htmx 필수 속성 정리

HTMX

htmx를 사용하면 자바스크립트 코드를 거의 작성하지 안혹 Ajax 요청과 페이지 갱신 처리를 할 수 있다.

 

라이브러리 추가

 <script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.min.js"></script>

 

 

hx-get

지정 주소로 GET 요청을 보냅니다.

• hx-get
• hx-post
• hx-put
• hx-patch
• hx-delete

</> htmx ~ hx-get Attribute

 

 

 

hx-trigger

HTTP 요청을 실행할 조건을 지정하는 속성이다. 사용자의 동작에 반응하여 서버와의 상호작용을 설정할 수 있다.

• changed (값 변경)
• click (클릭)
• keyup (키 입력)
• revealed (화면에 보일 때)
• load (로딩 시)
• mouseenter (마우스가 올라갔을 때)
• once (1회만 실행)
• delay:딜레이시간
• from:CSS셀렉터 (지정 요소의 이벤트를 처리)
• every 주기 (대시보드에 적합)

</> htmx ~ hx-trigger Attribute

 

 

 

hx-target

HTTP 응답을 받아서 반영할 대상 요소를 지정하는 속성

• this - hx-target이 지정된 요소 자체를 대상
• <css셀렉터> - css셀렉터를 사용하여 업데이트할 요소를 직접 설정
• closest <css셀렉터> - CSS셀렉터와 일치하는 가장 가까운 조상 요소
• find <css셀렉터> - css설렉터와 일치하는 하위 요소
• next - 다른 형제 요소
• next <css셀렉터> - 다음 형제 요소 중에서 css 셀렉터와 일치하는 요소
• previous - 이전 형제 요소
• previous <css셀렉터> - 이전 형제 요소 중에서 css 셀렉터와 일치하는 요소

- 공식문서 : https://htmx.org/attributes/hx-target/

</> htmx ~ hx-target Attribute

 

 

 

hx-swap

HTTP 응답을 받아서 해당 요청을 처리하는 방식을 지정하는 속성

</div id="tag-list-container">
 
태그 #1
태그 #2
태그 #3

 

innerHTML

- 기본값으로 대상 요소의 내부 HTML을 응답 데이터로 교체

{# hx-swap="innerHTML" #}
<div id="tag-list-container">
 <div>태그 #4</div>
 <div>태그 #5</div>
 <div>태그 #6</div>
</div>

 

outerHTML

- 대상 요소 자체를 응답데이터로 완전히 교체

{# hx-swap="outerHTML" #}
<div>태그 #4</div>
<div>태그 #5</div>
<div>태그 #6</div>

 

beforebegin

- 대상 요소 앞에 응답 데이터를 추가

{# hx-swap="beforebegin" #}
<div>태그 #4</div>
<div>태그 #5</div>
<div>태그 #6</div>
<div id="tag-list-container">
 <div>태그 #1</div>
 <div>태그 #2</div>
 <div>태그 #3</div>
</div>

 

 

beforeend

- 대상 요소의 마지막 자식 요소 다음에 응답 데이터를 추가

{# hx-swap="beforeend" : 현 구성에 적합 #}
<div id="tag-list-container">
 <div>태그 #1</div>
 <div>태그 #2</div>
 <div>태그 #3</div>
 <div>태그 #4</div>
 <div>태그 #5</div>
 <div>태그 #6</div>
 </div>

 

afterbegin

- 대상 요소의 첫 자식 요소 이전에 응답 데이터를 추가

{# hx-swap="afterbegin" #}
<div id="tag-list-container">
 <div>태그 #4</div>
 <div>태그 #5</div>
 <div>태그 #6</div>
 <div>태그 #1</div>
 <div>태그 #2</div>
 <div>태그 #3</div>
</div>

 

afterend

- 대상 요소 다음에 응답 데이터를 추가

{# hx-swap="aftereend" #}
<div id="tag-list-container">
 <div>태그 #1</div>
 <div>태그 #2</div>
 <div>태그 #3</div>
</div>
<div>태그 #4</div>
<div>태그 #5</div>
<div>태그 #6</div>

 

delete

- 대상 요소를 삭제, 응답 데이터를 무시하고 요소를 삭제

{# hx-swap="delete" #}

 

none

- 응답 데이터를 무시, 요청을 트리거할 때, 서버로부터 받은 데이터를 사용하지 않음

{# hx-swap="none" #}
<div id="tag-list-container">
 <div>태그 #1</div>
 <div>태그 #2</div>
 <div>태그 #3</div>
</div>