제퍼넷 로고

생성 데이터 인텔리전스

암호

React와 HTMX 비교: 올바른 프런트엔드 접근 방식 선택 | 코멘터

플라톤에 의해 재발행
플라톤에 의해 재발행

시간

조회 수 : 183

소개 :

최신 웹 애플리케이션을 구축하려면 강력한 백엔드 프레임워크와 프런트엔드 프레임워크를 결합하여 동적인 대화형 사용자 경험을 생성해야 하는 경우가 많습니다. React와 HTMX는 프론트엔드 개발과 관련하여 널리 사용되는 두 가지 선택입니다. 이 기사에서는 React와 HTMX의 차이점과 매력적인 웹 애플리케이션을 만드는 데 어떻게 사용할 수 있는지 살펴보겠습니다. 또한 각 접근 방식에 대한 실용적인 예를 제공합니다.

반응:

React는 구성 요소 기반 아키텍처와 효율적인 렌더링 기능으로 인해 웹 개발 커뮤니티에서 상당한 인기를 얻었습니다.

React를 사용하려면 Webpack과 같은 도구로 구동되는 프런트엔드 환경을 설정해야 합니다. 그런 다음 React 구성 요소를 사용하여 API를 통해 백엔드에서 데이터를 가져오고 클라이언트 측에서 동적으로 렌더링할 수 있습니다. 이 접근 방식은 React가 UI의 필요한 부분만 업데이트하여 전체 페이지 다시 로드를 방지하므로 원활한 사용자 경험을 제공합니다.

반응 예시 앱:

이 예제는 사용자가 텍스트를 입력할 때 연락처 데이터베이스를 능동적으로 검색합니다.

검색 입력과 빈 테이블로 시작합니다.

import React, { useState } from 'react'; function ContactSearch() { const [searchResults, setSearchResults] = useState([]); const handleSearch = (event) => { const searchTerm = event.target.value; fetch('/search', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ search: searchTerm }), }) .then((response) => response.json()) .then((data) => { setSearchResults(data); }); }; return ( <div> <h3> Search Contacts <span className="htmx-indicator"> <img src="/img/bars.svg" alt="Loading..." /> Searching... </span> </h3> <input className="form-control" type="search" name="search" placeholder="Begin Typing To Search Users..." onChange={handleSearch} /> <table className="table"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody id="search-results"> {searchResults.map((contact) => ( <tr key={contact.id}> <td>{contact.firstName}</td> <td>{contact.lastName}</td> <td>{contact.email}</td> </tr> ))} </tbody> </table> </div> );
} export default ContactSearch;

React 프론트엔드용 Express.js 앱

const express = require('express');
const app = express(); app.post('/search', (req, res) => { const searchTerm = req.body.search; const searchResults = [ { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com' }, { id: 2, firstName: 'Jane', lastName: 'Doe', email: 'jane@example.com' }, ]; const filteredResults = searchResults.filter((result) => { const firstNameMatch = result.firstName.toLowerCase().includes(searchTerm.toLowerCase()); const lastNameMatch = result.lastName.toLowerCase().includes(searchTerm.toLowerCase()); const emailMatch = result.email.toLowerCase().includes(searchTerm.toLowerCase()); return firstNameMatch || lastNameMatch || emailMatch; }); setTimeout(() => { res.json(filteredResults); }, 1000); }); app.listen(3000, () => { console.log('Server started on port 3000');
});

HTML:

HTMX는 최소한의 JavaScript 코드로 사용자 인터페이스를 향상시키는 데 중점을 두어 다른 접근 방식을 취합니다. HTMX를 사용하면 HTML 마크업에 직접 내장된 선언적 속성을 사용하여 프런트엔드에 상호작용성을 추가할 수 있습니다.

HTMX를 사용하면 전체 페이지를 다시 로드하지 않고도 개별 작업 항목을 업데이트하는 기능을 활용할 수 있습니다. HTMX는 백그라운드에서 서버에 HTTP 요청을 하고 hx-swap 속성을 사용하여 페이지의 특정 요소를 업데이트하여 이를 달성합니다. 이 접근 방식은 별도의 프런트엔드 도구와 JavaScript 코드의 필요성을 줄여 개발 프로세스를 단순화합니다.

HTMX 예제 앱:

<h3> Search Contacts <span class="htmx-indicator"> <img src="/img/bars.svg"/> Searching... </span> </h3>
<input class="form-control" type="search" name="search" placeholder="Begin Typing To Search Users..." hx-post="/search" hx-trigger="keyup changed delay:500ms, search" hx-target="#search-results" hx-indicator=".htmx-indicator"> <table class="table"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody id="search-results"> </tbody>
</table>

HTMX 프런트엔드용 Express.js 앱

const express = require('express');
const app = express(); app.post('/search', (req, res) => { const searchTerm = req.body.search; const searchResults = [ { id: 1, firstName: 'John', lastName: 'Doe', email: 'john@example.com' }, { id: 2, firstName: 'Jane', lastName: 'Doe', email: 'jane@example.com' }, ]; const filteredResults = searchResults.filter((result) => { const firstNameMatch = result.firstName.toLowerCase().includes(searchTerm.toLowerCase()); const lastNameMatch = result.lastName.toLowerCase().includes(searchTerm.toLowerCase()); const emailMatch = result.email.toLowerCase().includes(searchTerm.toLowerCase()); return firstNameMatch || lastNameMatch || emailMatch; }); const html = filteredResults .map((result) => `<tr><td>${result.firstName}</td><td>${result.lastName}</td><td>${result.email}</td></tr>`) .join(''); setTimeout(() => { res.send(html); }, 1000); }); app.listen(3000, () => { console.log('Server started on port 3000');
});

올바른 접근 방식 선택:

React와 HTMX 중에서 결정할 때 다음 요소를 고려하십시오.

  1. 프로젝트 복잡성: 애플리케이션에 복잡한 UI 상호 작용, 실시간 업데이트 및 재사용 가능한 다양한 구성 요소 세트가 필요한 경우 React가 더 나은 선택일 수 있습니다. React의 구성 요소 기반 아키텍처와 방대한 생태계는 이러한 시나리오를 처리하는 데 필요한 도구를 제공합니다.

  2. 개발 속도: HTMX는 단순성과 개발 속도가 가장 중요한 프로젝트에 탁월한 선택이 될 수 있습니다. HTMX를 사용하면 프런트엔드에 직접 상호 작용을 추가하여 광범위한 JavaScript 개발 및 도구 설정의 필요성을 줄일 수 있습니다.

  3. 팀 전문성: 개발팀의 기술과 전문성을 고려하십시오. 그들이 React에 정통하고 React 생태계에 익숙하다면 React가 선호되는 옵션일 수 있습니다. 반면에 팀에서 더 간단한 프런트엔드 접근 방식을 선호하는 경우 HTMX가 더 적합할 수 있습니다.

결론 :

React와 HTMX 모두 강력한 프런트엔드 솔루션을 제공합니다. React는 복잡한 대화형 웹 애플리케이션을 구축하기 위한 포괄적인 프레임워크를 제공하는 반면 HTMX는 선언적 속성을 HTML 마크업에 직접 내장하여 상호작용을 단순화합니다. 두 가지 중에서 선택하는 것은 프로젝트 요구 사항, 복잡성 및 개발 팀의 전문성에 따라 다릅니다. 장단점을 평가하고, 특정 요구 사항을 고려하고, 목표에 가장 잘 맞는 접근 방식을 선택하십시오.

spot_img

VC 카페

벤처 캐피탈

VC 카페

벤처 캐피탈

최신 인텔리전스

spot_img

저작권 @ 2024 Plato Technologies Inc.