프레임워크 간의 공통점과 차이점이 무엇인지, 웹 플랫폼이 보다 간결한 대안으로 무엇을 제공해야 하는지, 충분한지 여부를 확인하는 데 관심이 있었습니다. 내 목표는 프레임워크를 공격하는 것이 아니라 비용과 이점을 이해하고 대안이 있는지 확인하고 프레임워크를 사용하기로 결정하더라도 이를 통해 배울 수 있는지 확인하는 것입니다.
이 첫 번째 부분에서는 프레임워크 전반에 걸쳐 공통적인 몇 가지 기술 기능과 일부 프레임워크에서 이를 구현하는 방법에 대해 자세히 설명합니다. 또한 이러한 프레임워크를 사용하는 비용도 살펴보겠습니다.
프레임워크
저는 4가지 프레임워크를 선택했습니다. 오늘날 지배적인 React, 그리고 React와 다른 작업을 수행한다고 주장하는 3명의 새로운 경쟁자입니다.
- React
“React를 사용하면 대화형 UI를 쉽게 만들 수 있습니다. 선언적 보기는 코드를 보다 예측 가능하고 디버그하기 쉽게 만듭니다." - SolidJS
"Solid는 React와 동일한 철학을 따릅니다. 그러나 가상 DOM을 사용하지 않는 완전히 다른 구현을 가지고 있습니다." - Svelte
“Svelte는 사용자 인터페이스 구축에 대한 근본적이고 새로운 접근 방식입니다. 앱을 구축할 때 발생하는 컴파일 단계입니다. 가상 DOM 비교와 같은 기술을 사용하는 대신 Svelte는 앱 상태가 변경될 때 DOM을 외과적으로 업데이트하는 코드를 작성합니다.” - Lit
"웹 구성 요소 표준 위에 구축된 Lit은 반응성, 선언적 템플릿 및 몇 가지 사려 깊은 기능을 추가합니다."
프레임워크가 차별화 요소에 대해 말하는 내용을 요약하면 다음과 같습니다.
- React는 선언적 보기를 사용하여 UI를 더 쉽게 구축할 수 있도록 합니다.
- SolidJS는 React의 철학을 따르지만 다른 기술을 사용합니다.
- Svelte는 UI에 컴파일 타임 접근 방식을 사용합니다.
- Lit은 기존 표준을 사용하고 일부 경량 기능이 추가되었습니다.
프레임워크가 해결하는 것
프레임워크 자체는 선언적, 반응성 및 가상 DOM이라는 단어를 언급합니다. 그 의미에 대해 알아보겠습니다.
선언적 프로그래밍
선언적 프로그래밍은 제어 흐름을 지정하지 않고 논리를 정의하는 패러다임입니다. 우리는 어떤 단계가 우리를 거기에 데려갈 것인지보다 결과가 무엇인지 설명합니다.
2010년경 선언적 프레임워크의 초기에는 DOM API가 훨씬 더 단순하고 장황했으며 명령형 JavaScript로 웹 애플리케이션을 작성하려면 많은 상용구 코드가 필요했습니다. 당시 획기적인 Knockout 및 AngularJS 프레임워크와 함께 " 모델-뷰-뷰모델 "(MVVM) 개념이 널리 보급되어 라이브러리 내부의 복잡성을 처리하는 JavaScript 선언 계층을 제공했습니다.
MVVM은 오늘날 널리 사용되는 용어가 아니며 "데이터 바인딩"이라는 이전 용어의 변형입니다.
데이터 바인딩
데이터 바인딩은 모델과 사용자 인터페이스 간에 데이터가 동기화되는 방식을 표현하는 선언적 방법입니다.
인기 있는 모든 UI 프레임워크는 데이터 바인딩 형식을 제공하며 해당 자습서는 데이터 바인딩 예제로 시작합니다.
다음은 JSX(SolidJS 및 React)의 데이터 바인딩입니다.
function HelloWorld() {
const name = "Solid or React";
return (
<div>Hello {name}!</div>
)
}
Lit의 데이터 바인딩:
class HelloWorld extends LitElement {
@property()
name = 'lit';
render() {
return html`<p>Hello ${this.name}!</p>`;
}
}
Svelte의 데이터 바인딩:
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>
반응성
반응성은 변화의 전파를 표현하는 선언적 방법입니다.
데이터 바인딩을 선언적으로 표현하는 방법이 있을 때 프레임워크가 변경 사항을 전파하는 효율적인 방법이 필요합니다.
React 엔진은 렌더링 결과를 이전 결과와 비교하고 그 차이를 DOM 자체에 적용합니다. 변경 전파를 처리하는 이러한 방법을 가상 DOM 이라고 합니다 .
SolidJS에서 이것은 저장소 및 내장 요소를 사용하여 보다 명시적으로 수행됩니다. 예를 들어, Show요소는 가상 DOM 대신 내부적으로 변경된 사항을 추적합니다.
Svelte에서는 "반응성" 코드가 생성됩니다. Svelte는 어떤 이벤트가 변경을 유발할 수 있는지 알고 있으며 이벤트와 DOM 변경 사이에 선을 그리는 간단한 코드를 생성합니다.
Lit에서 반응성은 기본적으로 HTML 사용자 정의 요소의 기본 제공 반응성에 의존하는 요소 속성을 사용하여 수행됩니다.
논리
프레임워크가 반응성 구현과 함께 데이터 바인딩을 위한 선언적 인터페이스를 제공할 때 전통적으로 명령형으로 작성되는 일부 논리를 표현하는 방법도 제공해야 합니다. 논리의 기본 빌딩 블록은 "if"와 "for"이며 모든 주요 프레임워크는 이러한 빌딩 블록의 일부 표현을 제공합니다.
조건부
숫자 및 문자열과 같은 기본 데이터를 바인딩하는 것 외에도 모든 프레임워크는 "조건부" 프리미티브를 제공합니다. React에서는 다음과 같이 보입니다.
const [hasError, setHasError] = useState(false);
return hasError ? <label>Message</label> : null;
…
setHasError(true);
SolidJS는 기본 제공 조건부 구성 요소를 제공합니다
<Show when={state.error}>
<label>Message</label>
</Show>
Svelte는 다음 #if지시문을 제공합니다.
{#if state.error}
<label>Message</label>
{/if}
Lit에서는 render함수에서 명시적 삼항 연산을 사용합니다.
render() {
return this.error ? html`<label>Message</label>`: null;
}
목록
다른 일반적인 프레임워크 기본 요소는 목록 처리입니다. 목록은 연락처, 알림 등의 목록과 같은 UI의 핵심 부분이며 효율적으로 작동하려면 하나의 데이터 항목이 변경될 때 전체 목록을 업데이트하지 않고 반응적이어야 합니다.
React에서 목록 처리는 다음과 같습니다.
contacts.map((contact, index) =>
<li key={index}>
{contact.name}
</li>)
React는 특별한 key속성을 사용하여 목록 항목을 구분하고 전체 목록이 렌더링할 때마다 바뀌지 않도록 합니다.
SolidJS에서는 for및 index내장 요소가 사용됩니다.
<For each={state.contacts}>
{contact => <DIV>{contact.name}</DIV> }
</For>
내부적으로 SolidJS는 항목이 변경될 때 업데이트할 요소를 결정하기 위해 for및 와 함께 자체 저장소를 사용합니다 . indexReact보다 더 명시적이어서 가상 DOM의 복잡성을 피할 수 있습니다.
eachSvelte는 업데이트 프로그램을 기반으로 변환되는 지시문을 사용합니다 .
{#each contacts as contact}
<div>{contact.name}</div>
{/each}
Lit은 repeatReact의 key기반 목록 매핑과 유사하게 작동하는 기능을 제공합니다.
repeat(contacts, contact => contact.id,
(contact, index) => html`<div>${contact.name}</div>`
댓글