[03-05] HTMX vs React 완벽 비교 !

[chouung]

여기저기서 HTMX가 보이고 들려서 읽어본 아티클~

HTMX vs React: A Complete Comparison

원문 : HTMX vs React: A Complete Comparison - Semaphore

htmx docs

HTMX

• 첫 출시 : 2020년 말
• HTML에서 직접 최신 브라우저 기능에 액세스할 수 있는 가볍고 의존성이 없으며 확장 가능한 자바스크립트 프론트엔드 라이브러리
• 세부적으로는 HTML 코드에서 직접 AJAX 요청, CSS 트랜지션, 웹소켓, 서버 전송 이벤트를 처리할 수 있다.
• HTMX의 궁극적 목표는 자바스크립트 없이도 HTML 내에서 직접 최신 브라우저 상호작용을 제공하는 것이다.
• 2023년 JavaScript 라이징 스타 "프론트엔드 프레임워크" 부문에서 React에 이어 2위를 차지했고, GitHub 액셀러레이터에 선정되었으며, GitHub에서 2만 개 이상의 별을 받은 HTMX !

	HTMX	React
개발	Big Sky Software	Meta
오픈소스	✅	✅
GitHub stars	29k+	218k+
크기	2.9 kB	6.4 kB
문법	custom attributes가 추가된 HTML기반	자바스크립트의 확장 버전인 JSX 기반
러닝커브	준수하다	험하다
기능	AJAX 요청 및 기타 사소한 기능	Composability, 단방향 데이터 바인딩, 상태 관리, 훅 등 다양한 기능
성능	굿	굿, 특히 대규모 앱이나 복잡한 웹 애플리케이션에서 유용함
Integration	기존 HTML 페이지에 임베드 가능	기존 HTML 페이지에 임베드는 가능하지만 주로 자바스크립트 기반 프로젝트에 사용된다.
커뮤니티	작지만 성장 중	업계 최대 규모
Ecosystem	매우 작다	매우 풍부하다

React를 쓰기까지: jQuery 부터 Modern Web Frameworks 까지

1. jQuery : 웹 개발 초창기에는 개발자들이 AJAX 요청, DOM 조작 및 이벤트 처리를 처리하기 위해 jQuery에 의존
2. Angular, React, Vue : 온라인 애플리케이션은 더욱 현대적이고 체계적이며 확장 가능한 형태로 발전
3. React : 컴포넌트 기반 아키텍처를 도입하여 웹 개발 생태계가 완전히 변함
   • UI와 단방향 데이터 흐름에 대한 선언적 접근 방식 → 웹 개발을 간소화하여 재사용성과 유지보수성을 높임

HTMX를 쓰기까지: Web Frameworks 부터 다양한 Modern HTML 까지

1. Angular, React, Vue : 구조화된 애플리케이션을 구축하는데 유용하지만 단순한 것이 필요한 개발자에게는 큰 부담
2. HTMX : React와 같이 최신 상호작용을 위한 경량 솔루션이지만 통합이 간단하고 jQuery와 같이 오버헤드가 없다. 자바스크립트의 사용을 최대한 줄일 수 있다.

HTMX: A New, Modern Approach to Interactivity

AJAX Request Triggers

• HTML에서 직접 AJAX 요청을 전송하는 기능
  • hx-get 지정된 URL로 GET 요청
  • hx-post 지정된 URL로 POST 요청
  • hx-put 지정된 URL로 PUT 요청
  • hx-patch 지정된 URL에 PATCH 요청
  • hx-delete 지정된 URL에 DELETE 요청

<div hx-get="/users">
    Show Users
</div>

Query Parameters and Body Data

HTMX가 쿼리 파라미터와와 body 데이터를 설정하는 방식은 HTTP 요청 유형에 따라 다르다.

• GET 요청
  • 기본적으로 hx-get은 AJAX 요청에 쿼리 파라미터를 자동으로 포함하지 않는다.
  • 쿼리 파라미터를 설정하려면 hx-get에 전달된 URL에 파라미터를 지정해야 한다.
• GET 외의 요청
  • 요소가 <form>인 경우
    • AJAX 요청 본문에는 name attribute를 매개변수 키로 사용하여 모든 입력값이 포함된다.
  • <form>이 아닌 경우
    • 본문에는 가장 가까운 <form>으로 둘러싸인 모든 입력값이 포함된다.
    • 혹은 element에 value attribute가 있는 경우 해당 속성이 body에 사용된다.
    • 다른 요소의 값을 본문에 추가하려면 요청 본문에 포함할 값을 가진 모든 요소의 CSS selector 함께 hx-include attribute를 사용한다.
    • hx-params attribute를 사용하여 일부 본문 매개변수를 필터링할 수 있다.
    • 사용자 정의 htmx:configRequest 이벤트 핸들러를 작성하여 본문 정의 로직을 작성할 수도 있다.

AJAX Result Handling

HTMX는 AJAX 요청을 트리거한 element의 내부 HTML을 서버에서 반환한 HTML 콘텐츠로 바꾼다.

hx-swap 및 hx-target 속성을 사용하여 이 동작을 사용자 정의할 수 있다.

• hx-swap 서버에서 반환된 HTML로 수행할 작업을 정의한다.
  • innerHTML(default), outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none
• hx-target CSS selector를 사용하여 선택한 요소에 swap 로직을 적용하도록 HTMX에 지시한다.

<!-- /tasks 엔드포인트에 POST 요청 -> 서버에서 반환한 HTML을 .todo-list 요소에 추가 -->
<button 
  hx-post="/tasks"
  hx-swap=".todo-list" 
  hx-target="afterend"
>
  Add task
</button>

HTMX vs React: 두개의 웹 기술 비교

접근성

• HTML : HTML을 확장하여 마크업으로 서버와 직접 상호 작용할 수 있는 기능을 제공. 단순성, 간결성, 가독성을 우선시

  <div hx-get="/hello-world">
      Click me!
  </div>
  

• React : JSX로 작성된 재사용 가능한 컴포넌트를 기반으로 사용자 인터페이스를 구축하기 위한 모든 기능을 갖춘 JavaScript 라이브러리

  import React, { useState } from "react"
  
  export default const HelloWorldComponent = () => {
    const [responseData, setResponseData] = useState(null)
  
    const handleClick = () => {
      fetch("/hello-world")
        .then(response => response.text())
        .then(data => {
          setResponseData(data)
        })
    }
  
    return (
      <div onClick={handleClick}>
        {responseData ? <>{responseData}</> : "Click me!"}
      </div>
    )
  }

성능

• HTMX: 가볍고 종속성이 없기 때문에 초기 페이지 로딩이 빠르고 클라이언트 측 처리가 줄어든다. 일반적으로 HTMX는 간단한 상호 작용이 있는 애플리케이션에서 사용하기 좋다.
• React: 많은 자바스크립트를 포함하기 때문에 네트워크 사용률과 클라이언트 측 렌더링 시간이 길어진다. 하지만 가상 DOM과 효율적인 Diffing Algorithm을 통해 React는 UI를 신속하게 업데이트할 수 있으므로 대규모 애플리케이션에 적합하다.

사용성

• HTMX: 전체 프론트엔드 프레임워크의 모든 고급 기능이 필요하지 않은 경우 가볍고 효율적인 옵션이다. 백엔드 개발자에게도 추천한다.
• React: 풍부한 사용자 경험을 제공하거나 복잡한 상태를 처리해야 하는 SPA에 가장 적합하다. 그리고 UI 컴포넌트를 재사용하려는 대규모 팀에도 적합하다. React에서 HTMX로 마이그레이션하면 코드베이스가 67% 더 작아질 수 있지만, React까지 필요 없는 간단한 어플리케이션인 경우에만 이를 추천한다.

그래서 뭘 쓰라구요 ?

• React : 상태 관리가 필요하고 복잡한 기능을 제공하며 재사용 가능한 컴포넌트가 필요한 웹 애플리케이션을 구축해야 할 때 권장
• HTMX : 단순한 상호 작용과 특별한 고급 기능이 없는 사이트를 구축해야 할 때 권장

후기

svelte의 경량화 버전인가..싶기도 한 HTMX ! 근데 아무래도 비교 대상은 React보다 좀 더 가벼운 프로젝트를 대상으로 하는 astro나 svelte같은 애들이 좀 더 적합하지 않나 싶습니다.

• htmx.org는 CDN으로 사용을 권장하는 것 같습니다. 필요한 파일만 불러올 경우 70 byte입니다. 정말 가볍긴 합니다!
• npm으로 설치할 경우 node_modules/htmx.org/dist/htmx.js 를 불러서 사용하라고 하네요.

[snaag]

문법이 상당히 신기하네여!! 확실히 글 내용 처럼 간단한 수준의 페이지를 구현하는데는 좋을 것 같네여. 간단한 싸프를 생각중인데 함 써볼게여! 좋은내용 감사합니당. 그런데 유지보수가 넘 빡셀거같아용~~ 👀👀👀

[chouung]

@snaag 진짜진짜 간단한 페이지 아니면 퍼블리셔 혹은 백엔드를 위한게 아닐까.. 같은 생각이 듭니다..