새로운 Svelte veactivity 시스템 학습

그래서 현존하는 최고의 프런트엔드 프레임워크의 최신 버전인 Svelte v5가 출시되었으며 이는 이전 버전과 크게 다릅니다. 주요 차이점은 핵심에 있습니다. 변수의 반응성이 구현되는 방식입니다. 이러한 변화로 인해 Svelte는 더 쉬워진 동시에 조금 더 어려워졌습니다.

실제 마이크로 프론트엔드 프로젝트에서 v5@next.155 이후 Svelte v5를 집중적으로 사용했기 때문에 제가 얻은 지식을 여러분에게 전달하여 도움을 드리고자 이 기사 시리즈를 쓰기로 결정했습니다. 코드를 이해하고 수용하며 잠재적으로 Svelte v5로 마이그레이션하세요.

간략한 소개: Svelte v4 반응성

Svelte v4의 반응성 시스템은 예술 작품에 불과합니다. Svelte는 구성 요소의 코드를 정적으로 분석한 다음 일반 JavaScript 변수가 변경될 때마다 DOM을 명령적으로 변경하는 코드를 생성합니다. 단순하고 우아하며 성능이 뛰어납니다. 간단한 예:

<script lang="ts">
    let clickCount = 0;

    function countClicks() {
        ++clickCount;
    }
</script>

<svelte:document on:click={() => countClicks()} />
<pre class="brush:php;toolbar:false">Clicks inside document: {clickCount}

이 간단한 구성 요소는 문서 개체에 '클릭' 이벤트 리스너를 추가하고 클릭수를 계산합니다. 위 코드만으로도 클릭수가 실시간으로 표시됩니다. 정말 놀랍죠?

하지만 인생의 모든 것이 그렇듯이 이것도 완벽하지는 않습니다. Rich Harris(Svelte의 창시자)가 주의 사항을 설명했으며 이 기사에서는 해당 내용을 다루지 않겠습니다. 한 가지만 언급하겠습니다: 코드 리팩터링.

코드 리팩토링은 불가능합니다

가장 중요한 주의 사항 중 하나는 이 반응성 시스템을 구성 요소 외부로 전달할 수 없다는 것입니다. 예를 들어, 예제에서 countClicks 함수의 구현을 캡슐화하는 재사용 가능한 모듈을 생성할 수 없습니다.

반응성은 정적 분석에 의존하기 때문에 함수를 모듈로 가져가면 변수 변형이 정적 코드 분석기에 숨겨지고 반응성이 손실됩니다.

Svelte v5의 반응성: 룬

룬이라는 용어는 "마법의 상징"을 의미하며 Svelte가 다음과 같은 기능적인 "마법의" 용어를 명명하기 위해 채택한 용어입니다.

• $스테이트

• $소품

• $바인딩 가능

• $파생

• $효과

Svelte v5의 반응성은 이러한 룬의 사용에 따라 결정됩니다.

R 값처럼 보이지만 생성된 코드는 실제로 L 값이라는 점에 유의하는 것이 중요합니다. 즉, 변수에서 변수로 상태를 전달할 수 있다고 생각하지 마십시오. 이에 대한 자세한 내용은 아래 $state 룬 섹션에 나와 있습니다.

이 새로운 반응성 시스템의 주요 장점은 다음과 같습니다.

• 구성요소 외부의 반응형 코드를 리팩터링하는 기능

• 세밀한 반응성

전자는 구성요소 외부에 반응성 변수를 가질 수 있다는 의미입니다. 후자는 상태 변경에 반응할 때 구성 요소를 다시 렌더링하는 것이 더 구체적이라는 것을 의미합니다.

구성 요소 외부에 상태를 갖는 기능은 이 기사에서 다루지 않지만 이에 대한 기사가 나올 예정이므로 시리즈를 따르십시오.

반면에 세분화된 반응성은 이제 Svelte가 상태 객체에서 어떤 속성이 변경되었는지 알 수 있고 해당 특정 속성의 영향을 받는 것만 다시 렌더링(및 효과를 다시 실행하고 파생 값을 다시 계산)할 수 있음을 의미합니다. 오직. 이는 경우에 따라 성능이 크게 향상되는 경우도 있습니다. 간단한 예를 들면 다음과 같습니다. 대규모 테이블 구성 요소에서 해당 데이터에 새 행이 추가된 것을 확인하면 Svelte는 새 행만 렌더링합니다. 세 번째 행의 단일 셀 값이 변경되면 해당 값을 표시하는 셀만 다시 렌더링됩니다. 이제 분명해졌나요? 그러기를 바라지만, 그렇지 않다면 댓글 섹션으로 연락주세요.

$state 룬

이 룬은 반응 상태를 만드는 데 사용됩니다. 위에서 Svelte v4 코드 샘플을 다시 작성해 보겠습니다.

<script lang="ts">
    let clickCount = 0;

    function countClicks() {
        ++clickCount;
    }
</script>

<svelte:document on:click={() => countClicks()} />
<pre class="brush:php;toolbar:false">Clicks inside document: {clickCount}

Svelte v4에서와 동일한 결과를 얻기 위해 0 대신 $state(0)를 사용했습니다.

이 룬을 관리하는 주요 규칙은 변수 또는 클래스 필드를 초기화하는 데에만 사용할 수 있다는 것입니다. 이는 앞서 읽은 중요한 참고 사항과 관련이 있습니다. 룬은 구문론적으로 함수처럼 보이지만 그렇지 않습니다. 컴파일러는 값을 계산하고 반환하는 함수의 기능과 호환되지 않는 코드로 룬을 대체합니다. 이는 다음이 두 번째 반응 변수를 생성하지 않는다는 것을 의미합니다:

<script lang="ts">
    let clickCount = $state(0);

    function countClicks() {
        ++clickCount;
    }
</script>

<svelte:document onclick={() => countClicks()} />
<pre class="brush:php;toolbar:false">Clicks inside document: {clickCount}

clickCount의 반응적 특성은 할당 연산자를 사용하여 secondClickCount로 전송되거나 복사되지 않습니다. 룬이 기능이었다면 위의 방법이 작동했을 것입니다. 그러나 그렇지 않습니다.

$state에 대해 언급해야 할 중요한 사항이 한 가지 더 있습니다. 즉, $state는 해당 값을 매우 반응적으로 만듭니다. 즉, 값이 속성에 개체가 포함된 개체인 경우 포함된 개체의 속성도 반응적입니다. 이 패턴은 재귀적으로 적용되므로 전체 객체 그래프가 궁극적으로 반응적입니다.

$props 룬

구성 요소 속성은 반응성이 있을 것으로 예상되며 Svelte v5는 $props 룬을 사용하여 이를 달성합니다.

<script lang="ts">
    let clickCount = $state(0);
    let secondClickCount = clickCount;

    function countClicks() {
        ++clickCount;
    }
</script>

TypeScript를 사용하는 것이 프로젝트의 전부이므로 유형을 사용하여 구성 요소 속성을 선언하는 것부터 시작합니다. 선택적 속성은 ?를 추가하여 표시됩니다. 그 이름 그대로.

그런 다음 구조 분해 명령문인 룬을 사용합니다. 이 예에서는 기본값을 할당하는 방법과 다른 속성인 "나머지" 속성을 허용하는 방법을 보여줍니다. 구성 요소는 이 "나머지" 속성을 범위 HTML 요소의 속성(속성)으로 확산(적용)합니다.

let props를 사용할 수 있습니다: Props = $props(); 속성을 정의하면 작동하지만 다양한 속성에 대한 기본값을 지정할 수 없으므로 항상 표시된 대로 속성을 선언하는 것이 좋습니다. 그런데 구조를 분해하지 않는다면 RestProperties를 선언하는 방법도 알 수 없습니다.

주의를 기울이셨다면 위의 내용을 실행하면 TypeScript 오류가 발생합니다. 결국 Props 유형에는 "rest" 속성에 대한 언급이 없습니다. RestProps를 어떻게 입력하나요?

일반적으로 다음과 같은 작업을 수행하여 모든 종류의 항목을 허용할 수 있습니다. TypeScript 실력에 달려있겠네요.

다음은 모든 data-* 속성을 허용하도록 Props 유형을 엽니다.

<script lang="ts">
    let clickCount = 0;

    function countClicks() {
        ++clickCount;
    }
</script>

<svelte:document on:click={() => countClicks()} />
<pre class="brush:php;toolbar:false">Clicks inside document: {clickCount}

이것은 무엇이든 허용합니다:

<script lang="ts">
    let clickCount = $state(0);

    function countClicks() {
        ++clickCount;
    }
</script>

<svelte:document onclick={() => countClicks()} />
<pre class="brush:php;toolbar:false">Clicks inside document: {clickCount}

그러나 대개는 RestProps를 수신하는 HTML 요소의 속성을 허용해야 하며, 이 예에서는 이것이 스팬 HTML 요소였습니다.

이 일반적인 시나리오에서 Svelte v5는 대부분의 HTML 요소를 포괄하는 유형을 제공합니다.

<script lang="ts">
    let clickCount = $state(0);
    let secondClickCount = clickCount;

    function countClicks() {
        ++clickCount;
    }
</script>

후자를 사용하면 VS Code와 같은 GUI가 범위 HTML 요소에 대해 가능한 소품(속성)에 대해 정확한 Intellisense를 제공하게 됩니다. 멋지죠?

HTML속성 인터페이스는 속성 목록에 특별한 특징이 없는 HTML 요소에 사용됩니다. 그러나 많은 요소가 있습니다. 예를 들어 HTMLAttributes를 수행하는 대신 'svelte/elements'에서 HTMLButtonAttributes 인터페이스를 가져옵니다.

마지막 세부 사항은 기본값입니다. 실제로 말할 내용은 많지 않으며 예제에 모든 내용이 나와 있습니다. 작업 소품의 기본값은 'sum'입니다. 컴포넌트를 사용할 때 속성을 지정하지 않으면 prop이 해당 값을 가정합니다.

원하는 기본값이 정의되지 않은 경우 아무것도 지정하지 마세요.

$bindable 룬

이것은 구성 요소 속성에서만 사용할 수 있는 매우 구체적인 룬입니다. 속성을 바인딩 가능으로 표시합니다.

모르거나 기억나지 않는 경우 Svelte에서는 속성의 양방향 바인딩을 허용합니다. Vue에도 이 기능이 있지만, React에는 없습니다.

사용법은 매우 간단합니다.

<script lang="ts">
    type Props = {
        data: number[];
        operation?: 'sum', 'avg';
    };

    let {
        data,
        operation = 'sum',
        ...restProps,
    }: Props = $props();

    function sum() {
        return data.reduce((p, c) => p + c);
    }

    function avg() {
        return sum() / data.length
    }
</script>

<span class="amount" {...restProps}>{operation === 'sum' ? sum() : avg()}</span>

<style>
    .amount {
        font-family: monospace;
    }
</style>

항상 값을 바인딩 가능하게 수정하는 속성을 만드세요. 그렇지 않으면 Svelte가 콘솔 경고 메시지를 표시합니다. 경고에는 구성 요소가 자신에 속하지 않은 상태를 수정해서는 안 되며, 의도한 경우 바인딩을 사용해야 한다는 내용이 나와 있습니다.

예시와 같이 $bindable 룬을 통해 속성 기본값을 지정할 수 있습니다. 이 예에서는 속성의 기본값을 5로 설정합니다.

그런데 여기서 기본값이 의미가 있을까요? 그렇죠. 속성을 바인딩 가능으로 선언한다고 해서 필수 속성이 되는 것은 아닙니다.

$파생 룬

props 또는 기타 반응 상태(시간에 따라 변경될 수 있음)의 값을 사용하여 값을 계산해야 할 때마다 $derived 룬을 사용합니다.

합계와 평균을 계산하는 예시 구성요소를 다시 가져와서 다음 룬을 사용하여 다시 작성할 수 있습니다.

<script lang="ts">
    let clickCount = 0;

    function countClicks() {
        ++clickCount;
    }
</script>

<svelte:document on:click={() => countClicks()} />
<pre class="brush:php;toolbar:false">Clicks inside document: {clickCount}

이제 입력만큼 반응적이고 데이터 배열의 데이터가 변경될 때마다 자동으로 다시 계산되는 result라는 새 변수가 있습니다. 그 자체가 반응형 변수이므로 이를 사용하는 템플릿(구성 요소의 HTML 부분)도 업데이트됩니다.

$효과 룬

이 룬을 사용하면 반응형 데이터가 변경될 때마다 실행되는 임의의 코드를 지정할 수 있습니다. 이 룬이 마법을 발휘하려면 실행 중에 읽혀지는 반응 데이터를 추적해야 합니다. 이 반응형 데이터 인벤토리는 인벤토리의 값이 변경될 때마다 효과를 다시 트리거하는 데 사용됩니다.

아마도 가장 일반적인 시나리오는 값 변경에 따라 데이터 가져오기 작업을 다시 트리거하는 것입니다.

<script lang="ts">
    let clickCount = $state(0);

    function countClicks() {
        ++clickCount;
    }
</script>

<svelte:document onclick={() => countClicks()} />
<pre class="brush:php;toolbar:false">Clicks inside document: {clickCount}

비동기 작업은 일반적으로 $derived 변수가 Promise를 유지하는 것을 원하지 않을 때마다 Effect 내부의 표준입니다. 하지만 개인적으로 Svelte에서는 Promise를 사용하는 것이 너무 쉽기 때문에 간단히 $derived 값을 사용하겠습니다. 다음에 표시된 변형은 데이터를 약속을 유지하는 반응형 계산 값으로 만듭니다.

<script lang="ts">
    let clickCount = $state(0);
    let secondClickCount = clickCount;

    function countClicks() {
        ++clickCount;
    }
</script>

일반적으로 $state와 $efect를 조합하는 경우 $derived를 사용하는 것이 더 나을 가능성이 높습니다. 하지만 이 규칙에는 예외가 있으므로 거룩한 말씀이 아닌 경험의 법칙으로 받아들이십시오.

데이터 가져오기가 $효과의 좋은 예가 아니라면 무엇인가요? 이것을 봅시다:

<script lang="ts">
    type Props = {
        data: number[];
        operation?: 'sum', 'avg';
    };

    let {
        data,
        operation = 'sum',
        ...restProps,
    }: Props = $props();

    function sum() {
        return data.reduce((p, c) => p + c);
    }

    function avg() {
        return sum() / data.length
    }
</script>

<span class="amount" {...restProps}>{operation === 'sum' ? sum() : avg()}</span>

<style>
    .amount {
        font-family: monospace;
    }
</style>

상태 속성을 통해 제어되는 간단한 타이머 구성요소입니다. 여기서 $효과 룬은 타이머 작동을 강제하는 데 사용됩니다. 이것을 $derived로 리팩토링하는 것을 상상할 수 있습니까? 그런데 elapsed는 prop이기 때문에 시도하지 마세요. 따라서 $derived와 prop이 동시에 될 수는 없습니다.

결론

Svelte v5에는 더 나은 재렌더링 성능과 더 나은 코드 리팩토링을 목표로 하는 새로운 반응성 엔진이 함께 제공됩니다. 새로운 반응성 시스템을 사용하는 것은 간단하면서도 복잡합니다. 일반적인 시나리오가 시스템 설계에 잘 포함되어 있기 때문에 간단하지만, v4와 비교할 때 코드가 좀 더 복잡해지기 때문에 조금 더 어렵습니다.

어쨌든 새로운 시스템은 강력하고 대부분의 시나리오를 우아하고 효과적으로 충족시켜 처음에는 조금 이상하더라도 사용하기 쉬운 모든 가능성에 대한 룬을 제공합니다.

다음은 무엇입니까

이 기사에서는 룬의 소개 부분과 이를 사용한 개인적인 경험에 대해서만 다뤘습니다. 독자 여러분, Svelte의 새로운 버전을 통해 더 빠르게 발전하는 데 도움이 될 더 많은 주제가 있습니다.

• $효과 작동 방식에 대한 심층적인 지식

• 고급 룬($state.raw, $derived.by, $효과.pre 등)

• 매장을 반응 상태로 교체

• 비정상적인 시나리오

보너스: 성능 차트

벤치마크 결과를 살펴보세요: 대화형 결과(krausest.github.io)

이제 프레임워크 목록이 끔찍하므로 다음 JSON을 복사한 다음 붙여넣기 버튼을 사용하여 웹페이지에 붙여넣을 수 있습니다(스크린샷 참조).

<script lang="ts">
    let clickCount = 0;

    function countClicks() {
        ++clickCount;
    }
</script>

<svelte:document on:click={() => countClicks()} />
<pre class="brush:php;toolbar:false">Clicks inside document: {clickCount}

그런데 단순히 창에 초점을 맞추고 키보드로 붙여넣는 것도 효과가 있다고 생각합니다.

이렇게 하면 프레임워크 목록이 더 인기 있는 프레임워크 또는 적어도 제가 인기 있다고 생각하는 프레임워크로 좁혀집니다. 어쩌면 당신이 나보다 더 잘 알고 있을지도 모릅니다.

Svelte v4가 더 이상 차트에 표시되지 않는 것은 아쉽지만 보시다시피 선택한 프레임워크 중 상위 3개 프레임워크는 의심의 여지가 없습니다: Vanilla JS, Solid 및 Svelte.

다른 한편으로는 React v19의 실적이 저조한 것이 안타깝습니다. 컴파일러가 그것을 훨씬 더 좋게 만들 예정이 아니었나요? 결국 헛된 노력이 된 것 같습니다. 물론 React v18보다 성능이 뛰어난 것 같지만 그게 전부입니다. Meta가 React에 계속 돈을 투자하는 이유는 확실하지 않습니다. 생각 있으신 분 계시나요?

위 내용은 새로운 Svelte veactivity 시스템 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!