React Hooks 대 Svelte

내 Twitch channel에서 React와 Svelte의 비교를 보여달라는 요청을 많이 받았습니다. 모든 사람에게 기본적인 React 예제를 가져와서 Svelte를 사용하여 다시 작성하는 방법을 보여주기 위해 짧은 비디오를 녹화할 것이라고 생각했습니다.



React Hooks 문서의 기본 예를 살펴보겠습니다. 여기에 버튼이 있는 간단한 구성 요소와 버튼을 클릭한 횟수를 보여주는 텍스트가 있습니다. 버튼이 클릭된 횟수를 추적하기 위해 컴포넌트의 일부 상태를 사용하고 있습니다. 상태 저장 구성 요소를 사용하는 훌륭하고 간단한 예입니다.

import React, { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

Svelte로 작성하면 어떻게 될까요? 위의 코드 대부분은 우리가 없이도 할 수 있는 React 상용구입니다. 모든 상용구를 주석 처리하여 시작하겠습니다.

// import React, { useState } from 'react';

// function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

// return (
<div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>Click me</button>
</div>;
// );
// }

그것은 우리에게 어느 정도 도움이되지만 여전히 유효한 Svelte가 아닙니다. Svelte는 HTML의 확장이므로 JavaScript 코드를 <script> 블록에 넣고 React의 useState 함수 대신 로컬 상태 변수를 사용하도록 변경해야 합니다.

<script>
    // Declare a new state variable, which we'll call "count"
    let count = 0;
</script>

<div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>Click me</button>
</div>

이것은 Svelte에 매우 가깝지만 한 가지 더 변경해야 합니다. React의 onClick 속성을 Svelte의 on:click 로 변경한 다음 클릭 핸들러를 변경하여 단순히 증분count하도록 해야 합니다.

<script>
    // Declare a new state variable, which we'll call "count"
    let count = 0;
</script>

<div>
    <p>You clicked {count} times</p>
    <button on:click={() => count++}>Click me</button>
</div>

모두 완료되었습니다! React 코드를 Svelte 코드로 변경하면 대부분의 시간을 코드를 삭제하는 데 사용하고 코드를 삭제하는 것이 놀랍습니다!

여기서 주요 차이점은 상태가 내부에 묶이는 대신 로컬 JavaScript 변수에 유지된다는 것입니다useState. 즉, 함수를 호출하지 않고 상태 변수를 새 값으로 설정할 수 있으며 구성 요소 코드를 매우 깨끗하고 간결하게 유지할 수 있습니다.

사실, 당신이 저에게 와서 Svelte보다 훨씬 더 간단한 새로운 프레임워크를 가지고 있다고 말한다면 저는 그것을 믿기 어려울 것입니다! Svelte 구성 요소에서 무엇을 제거할 수 있습니까? Vanilla JavaScript조차도 이 기본 Svelte 예제보다 훨씬 더 복잡합니다. Svelte는 웹 구성 요소를 가능한 한 단순하게 만들지만 더 이상 단순하지 않습니다.


Svelte 및 웹 개발에 관심이 있으십니까? Subscribe to the Coding with Jesse newsletter!