Svelte의 각 로직

이전에는 how if-else logic works in Svelte을 다뤘습니다. 오늘은 Svelte에서 각 로직을 사용하는 방법을 살펴보고 개체를 반복하여 콘텐츠를 표시하도록 하겠습니다.

Svelte를 처음 사용하는 경우 내 guide on how to create your first Svelte project here 를 읽어보십시오.

Svelte의 각 논리에 대한 동기

my guide on Svelte components에서 다룬 것처럼 Svelte에서 구성 요소를 만들고 있다고 가정해 보겠습니다. 우리는 일련의 데이터와 일부 기본 CSS를 가지고 있습니다. Svelte에서는 일반 HTML/CSS/Javascript 파일처럼 보입니다.

<script>
    let locations = [ 
        {
            country: "UK",
            city: "London",
        },
        {
            country: "India",
            city: "Mumbai"
        },
        {
            country: "France",
            city: "Paris"
        }
    ];
</script>

<div id="data">

</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

Svelte가 없으면 해당 데이터를 모두 표시하려면 이를 통해 루프를 수행하고 Javascript로 HTML을 생성해야 합니다. Svelte를 사용하면 데이터를 순환하는 것이 훨씬 쉽습니다. 우리는 단순히 {#each} 논리를 사용합니다.

Svelte의 각 로직 작동 방식

각각을 사용하여 #data div를 가져오고 그 안에서 바로 위치 개체를 반복할 수 있습니다.

Svelte의 각 루프에는 다음과 같은 구문이 있습니다.

{#each locations as { country, city }, i}
|-----|--------|    |---------------|  ^
   |      |                 |          └ - - - the index of the current item
   |      |                 └ - - - all the properties we want to access from "locations"
   |      └ - - - the variable in our Javascript to iterate over
   └ - - - the start of the each block

기본적으로 위치 기능을 표시하려는 속성으로 분해할 수 있습니다. 국가만 표시하려면 {#each locations as { country }, i} 를 작성할 수 있습니다.

i를 완전히 생략하고 {#each locations as { country, city }}라고 쓸 수도 있습니다.

Svelte에서 각 로직 사용

예를 들어 보겠습니다. 아래에서는 각 논리를 사용하여 위치 목록을 HTML로 변환했습니다.

<script>
    let locations = [ 
        {
            country: "UK",
            city: "London",
        },
        {
            country: "India",
            city: "Mumbai"
        },
        {
            country: "France",
            city: "Paris"
        }
    ];
</script>

<div id="data">
    {#each locations as { country, city }, i}
        <div class="county-city">
            {i + 1}: {country}, {city}
        </div>
    {/each}
</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

위의 코드는 다음과 같은 출력을 생성합니다.

1: 영국, 런던
2: 인도, 뭄바이
3: 프랑스, ​​파리

Svelte는 이를 매우 쉽게 만들고 데이터를 제외할 수 있는 유연성을 제공합니다. 예를 들어 다음은 색인 없이 국가만 표시하는 예입니다.

<script>
    let locations = [ 
        {
            country: "UK",
            city: "London",
        },
        {
            country: "India",
            city: "Mumbai"
        },
        {
            country: "France",
            city: "Paris"
        }
    ];
</script>

<div id="data">
    {#each locations as { country }}
        <div class="county-city">
            {country}
        </div>
    {/each}
</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

위의 코드는 다음과 같은 출력을 생성합니다.

영국
인도
프랑스

Svelte의 각 블록에 키 입력

전체 개체에 액세스하려는 경우 Svelte는 해당 옵션도 제공합니다. 예를 들어 {#each locations as {country, city}, i} 대신 다음과 같이 간단하게 작성할 수 있습니다.

{#each locations as location, i}

예를 들어 보겠습니다. 아래 코드는 이전 예제와 정확히 동일하게 작동하지만 국가를 직접 참조하는 대신 location.country를 작성합니다. 두 방법 모두 동일하므로 어떤 것을 사용하는 것이 좋을지는 여러분에게 달려 있습니다. 어떤 사람들은 객체에서 사용할 요소를 지속적으로 재정의할 필요가 없기 때문에 단순성 때문에 이 버전을 선호합니다.

<script>
    let locations = [ 
        {
            country: "UK",
            city: "London",
        },
        {
            country: "India",
            city: "Mumbai"
        },
        {
            country: "France",
            city: "Paris"
        }
    ];
</script>

<div id="data">
    {#each locations as location, i}
        <div class="county-city">
            {i + 1}: {location.country}, {location.city}
        </div>
    {/each}
</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

Svelte의 각 문에 키 입력

사전 정의된 식별자가 이미 있는 경우 인덱스와 함께 Svelte에 전달할 수 있습니다. 이것의 이점은 데이터를 업데이트하거나 변경해야 하는 경우 원래 데이터 세트 간에 강력한 링크를 유지하고 Svelte는 데이터가 변경되는 경우 끝에 무언가를 추가하거나 제거하는 대신 이를 사용하여 목록을 비교한다는 것입니다.

이에 대해 생각하는 좋은 방법은 키를 제공하면 Svelte에게 HTML 요소를 해당 키에 매핑하도록 지시하는 것입니다. 키가 있는 항목이 제거되면 DOM 요소가 제거됩니다. 해당 키의 속성이 변경되면 Svelte가 DOM 요소를 업데이트합니다.

대신 키를 제공하지 않으면 Svelte는 배열 인덱스에서 벗어납니다. 이로 인해 몇 가지 문제가 발생할 수 있습니다. 예를 들어 처음부터 요소를 제거하면 첫 번째 DOM 요소가 배열의 "새"첫 번째 항목의 속성으로 간단히 업데이트됩니다. 따라서 고유 키를 사용하는 것이 유용할 수 있습니다.

Svelte에서 Keyed each 문을 사용하는 방법

let locations = [ 
    {
        id: "123-123-123",
        country: "UK",
        city: "London",
    },
    {
        id: "124-124-124",
        country: "India",
        city: "Mumbai"
    },
    {
        id: "125-125-125",
        country: "France",
        city: "Paris"
    }
];

그런 다음 id를 각 항목의 고유 키로 정의할 수 있습니다. 그렇게 하고 싶다면 다음과 같이 보일 것입니다.

{#each locations as location, i (location.id)}

또는 분해하는 경우 다음과 같이 작성할 수도 있습니다.

{#each locations as {id, country, city}, i (id)}

또는 마지막으로 i를 모두 제거하고 단순히 id를 참조할 수 있습니다. 이렇게 하면 코드에서 id를 사용할 수 있고 DOM 요소를 id 속성에 연결할 수도 있습니다.

{#each locations as {id, country, city} (id)}

코드에서 이것을 사용하면 여전히 동일한 결과를 얻을 수 있지만 DOM 요소를 특정 배열 요소에 하드 링크하게 됩니다.

<script>
let locations = [ 
    {
        id: "123-123-123",
        country: "UK",
        city: "London",
    },
    {
        id: "124-124-124",
        country: "India",
        city: "Mumbai"
    },
    {
        id: "125-125-125",
        country: "France",
        city: "Paris"
    }
];
</script>

<div id="data">
    {#each locations as location, i (location.id)}
        <div class="county-city">
            {i + 1}: {location.country}, {location.city}
        </div>
    {/each}
</div>

<style>
    #data {
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    }
</style>

Svelte의 each-else 문

{:else} 문을 사용하여 빈 목록에 대한 기본 동작을 정의할 수 있습니다. {#each} 문을 정상적으로 정의하고 뒤에 추가하기만 하면 됩니다. 목록이 비어 있는 경우에만 표시됩니다.

다음은 예입니다.

<div id="data">
    {#each locations as location, i (location.id)}
        <div class="county-city">
            {i + 1}: {location.country}, {location.city}
        </div>
    {:else}
        <div class="empty-list">No items to show!</div>
    {/each}
</div>