DEV Community: freeseamew

4. transition(화면 전환 효과)

freeseamew — Thu, 04 Aug 2022 08:39:00 +0000

1. transition 소개

이번에 알아볼 Svelte의 기능은 transition 즉 화면전환 효과 입니다. HTML 돔 영역이 화면에 나타날때 혹은 사라질 때 페이드효과(점점 선명해지는 효과)나 회전 등의 전환 효과를 줄 수 있는 기능입니다.

svetle에서는 이 전환효과를 쉽게 구현할 수 있도록 다음과 같은 트랜지션 효과들을 지원하고 있습니다. 보통 PPT를 작성할 때 사용했던 효과를 떠올리시면 대략 어떤 기능의 효과인지 알 수 있을 것입니다.

그럼 이 효과들이 어떻게 작동하는지 하나씩 살펴보도록 하겠습니다.

fade: 투명한 상태에서 점점 진해지는 효과
blur: 초점이 맞지 않은 상태에서 선명한 상태로 변화는 효과
fly: 특정위치로 날라가는 효과
slide: 접힌 상태에서 펼쳐지는 효과
scale: 가운데를 중심으로 작은상태에서 큰 상태로 변하는 효과
draw: svg를 이용하는 전환효과 (뒤에 따로 설명)

<script>
    import { fade, blur, fly, slide, scale, draw } from 'svelte/transition';
    import { bounceInOut, backOut } from 'svelte/easing';   

    let visibles = {
        'fade': false,
        'slide': false,
        'blur': false,
        'fly': false,
        'scale': false,
    }

    const changeVisible = (type) => {
        visibles[type] = !visibles[type]
    }

</script>

<button on:click={() => changeVisible('fade')}>fade</button>
<button on:click={() => changeVisible('slide')}>slide</button>
<button on:click={() => changeVisible('blur')}>blur</button>
<button on:click={() => changeVisible('fly')}>fly</button>
<button on:click={() => changeVisible('scale')}>scale</button>

<br/>

{#if visibles.fade}
    <div transition:fade class="wrap" >
        <h1>fade 예제</h1>
    </div>
{/if}

{#if visibles.slide}
    <div transition:slide class="wrap" >
        <h1>slide 예제</h1>
    </div>
{/if}

{#if visibles.blur}
    <div transition:blur class="wrap" >
        <h1>blur 예제</h1>
    </div>
{/if}

{#if visibles.fly}
    <div transition:fly={{x:100}} class="wrap" >
        <h1>fly 예제</h1>
    </div>
{/if}

{#if visibles.scale}
    <div transition:scale class="wrap" >
        <h1>scale 예제</h1>
    </div>
{/if}

<style>
    .wrap {
        padding: 20px;
        background-color: #288EDD;
        text-align: center;
    }
</style>

이 트랜지션을 사용하는 방법은 다음과 같습니다. 사용할 transion을 svelte/transition에서 가져오고, 또 나중에 설명할 easing도 사용할 효과들을 선택해 import로 가져온 다음 효과를 주고싶은 HTML 돔이나 컴포넌트에 transition drective를 입력하면 그 돔이나 컴포넌트가 나타나거나 사라질때 선택한 효과가 나타나게 됩니다.

<script>
    import { fade, blur, fly, slide, scale, draw } from 'svelte/transition';
    import { bounceInOut, backOut } from 'svelte/easing';   
    ...
</script>

<div transition:트랜지션이름 > 
    ...
</div>

그리고 이 transition은 다음과 같은 공통 옵션들이 있습니다.

delay: 지정된 시간(밀리초) 후에 전환 효과가 실행.
duration: 효과가 지정된 시간동안 실행.
easing: 샘플링된 전환 효과 옵션들

옵션의 경우 transition 이름옆에 이처럼 대활호를 두번 작성하고 그안에 원하는 옵션을 넣어주면 됩니다. delay와 duration의 경우 모두 시간과 관련된 옵션으로 1000은 1초를 의미합니다.

<div transition:트랜지션이름={{duration:1000, delay:500 }} > 
    ...
</div>

여기 taransiton들 중에서 fade, slide 의 경우는 이 기본 옵션만을 사용합니다.

2. 효과 종류

2-1. fade

fade는 효과를 적용할 대상이 투명한 상태에서 점점 진해지도록 하는 전환 효과 입니다. 이 fade의 경우 delay와 duration이라는 속성을 가집니다. 이 두가지 속성을 통해서 효과를 제어할 수 있습니다.

delay: 지정된 시간(밀리초) 후에 전환 효과가 실행.
duration: 효과가 지정된 시간동안 실행.
easing: 샘플링된 전환 효과의 속도 함수.

delay와 duration을 적용해 보도록 하겠습니다. 실행해 보시면 1초후에 동작이 시작되고, 적용되는 효과도 duration 때문에 좀더 천천히 발생하는 것을 볼 수 있습니다.

<div transition:fade="{{delay: 1000, duration: 1000}}" class="wrap">

추가로 easing이라는 것을 이용할 수 도 있습니다. 이 easing은 효과가 일정한 속도로 나오는 것이 아니고

좀 다른 속도로 나타나게 됩니다. 이것도 효과를 보면서 설명하겠습니다.

아래 주소에서 각각의 easing이 있습니다. 이중에서 in은 나타날때 out은 사라질때 효과가 적용되고 inout은 나타나고 사라질 때 모두 특정 easing이 적용되는 옵션을 말합니다.

https://svelte.dev/docs#run-time-svelte-easing
https://svelte.dev/examples/easing

이 easing의 경우transiton처럼 사용할 easing을 import하고 옵션에 적용하면 되겠습니다.

import { easing이름 } from 'svelte/easing';

2-2. slide

slide는 말그대로 슬라이드 효과 즉 접었다 펴지는 효과를 나타냅니다. 속성은 fade와 같은 delay, duration, easing 만을 가집니다.

delay
duration
easing

2-3. blur

blur는 초점이 맞지 않은 것과 같은 흐린 상태에서 점점 선명해지는 효과 입니다.
blur를 제어하는 속성으로 delay, duration, easing말고 opacity, amount 라는 속성이 추가로 있습니다. 여기서 opactity는 불투명도를 나타내고, amount는 흐릿한 효과의 크기를 나타냅니다.

delay
duration
easing
opacity: 애니메이션 불투명도 값(기본값: 0~100)
amount: px단위로 흐릿해지는 애니메션 크기(기본값: 5)

옵션을 조절해서 확인해 보면 도움이 될 것입니다.

<div transition:blur="{{delay: 200, duration: 300, opacity: 1, amount: 5}}" class="wrap">

2-4. fly

fly는 말그대로 설정 좌표(x, y)에서 부터 날라오는 효과입니다. 기본적으로 시작할 좌표를 설정해야 합니다. 그래서 x, y 라는 속성이 필수로 적용해야 합니다. 이때 x, y 하나만 입력해도 됩니다.
또 다른 옵션으로 선명해 지는 효과도 같이 적용되므로 opacity 도 적용할 수 있습니다.

delay
duration
easing
x : 화면효과가 시작되거나 끝나는 x축 좌표
y: 화면효과가 시작되거나 끝나는 y축 좌표
opacity

2-5. scale

scale은 아주 작은 사이즈에서 원래의 설정된 사이즈로 커지거나 작아지는 효과입니다. 설정값으로는 start가 추가되는데 이값은 효과의 시작시 스케일 사이즈를 나타냅니다. 또 scale역시도 opacity 옵션을 가집니다.

delay
duration
easing 기본 효과 이외에
start : 설정한 크기만큼 커지거나 작어지면서 사라지거나 나타남(기본값:0)
opacity

2-6. in, out 효과

기본적인 트랜지션 사용방법인 'transition:fade' 처럼 적용하면 화면에 나타날때와 사라질 때 모두 같은 효과가 적용됩니다. 여기에 in과 out이라는 디렉티브 이용하면 나타낼때 사라질때 서로 다른 효과를 줄 수 있습니다.

in:트랜지션이름
out:트랜지션이름

사용방법은 이렇습니다. 기존 트렌지션 데신에 in 또는 out에 트렌지션 이름을 사용하면 됩니다. 그리고 옵션은 기존과 동일하게 사용가능합니다.

    <div in:트렌지션이름 out:트렌지션이름={{옵션}} class="wrap" >
        ...
    </div>

예제코드 추가

<script>
    import { fade, blur, fly, slide, scale, draw } from 'svelte/transition';
    import { bounceInOut, backOut } from 'svelte/easing';   

    let visibles = {
        'fade': false,
        'slide': false,
        'blur': false,
        'fly': false,
        'scale': false,
        'inOut': false,

    }

    const changeVisible = (type) => {
        visibles[type] = !visibles[type]
    }

</script>

<button on:click={() => changeVisible('fade')}>fade</button>
<button on:click={() => changeVisible('slide')}>slide</button>
<button on:click={() => changeVisible('blur')}>blur</button>
<button on:click={() => changeVisible('fly')}>fly</button>
<button on:click={() => changeVisible('scale')}>scale</button>
<button on:click={() => changeVisible('inOut')}>in,out</button>

<br/>

{#if visibles.fade}
    <div transition:fade class="wrap" >
        <h1>fade 예제</h1>
    </div>
{/if}

{#if visibles.slide}
    <div transition:slide class="wrap" >
        <h1>slide 예제</h1>
    </div>
{/if}

{#if visibles.blur}
    <div transition:blur class="wrap" >
        <h1>blur 예제</h1>
    </div>
{/if}

{#if visibles.fly}
    <div transition:fly={{x:100}} class="wrap" >
        <h1>fly 예제</h1>
    </div>
{/if}

{#if visibles.scale}
    <div transition:scale class="wrap" >
        <h1>scale 예제</h1>
    </div>
{/if}

{#if visibles.inOut}
    <div in:fade out:slide={{duration:500}} class="wrap" >
        <h1>in, out 예제</h1>
    </div>
{/if}

<style>
    .wrap {
        padding: 20px;
        background-color: #288EDD;
        text-align: center;
    }
</style>

in,. out 디렉티브를 이용하면 돔이 나타날 때와 사라질 때 각각 다르게 효과를 줄 수 있게 됩니다. 이 기능도 필요에 따라 유용하게 사용할 수 있습니다.

2-7. draw

draw는 지금까지와는 조금 다른 전환효과 입니다. 일반적인 돔영역에 효과를 주는 것이 아니고, svg라는 일종의 벡터형식의 이미지에 효과를 주는 것입니다.

참고로 벡터이미지의 경우 의 정보와 같이 좌표 하나하나를 기록해서 이미지로 만드는 방식입니다. 즉 svg는 좌표값으로 이루어진 이미지 입니다. 그래서 이 svg이미지에 draw효과를 주면 마치 실제로 이 이미지를 그리는 것과 같은 효과를 볼 수 있습니다.

옵션으로는 기본적인 delay, duration, easing이 있고 여기에 추가로 speed가 있습니다. speed는 말그대로 그림을 그리는 속도입니다.

delay
duration
easing
speed : svg가 그려지는 속도

코드 를 실행시켜 draw가 어떤 효과인지 확인해 보겠습니다.

<script>
    import { draw } from 'svelte/transition';
    let visible = true;
</script>

{#if visible}
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
        <g>
            <path
                in:draw="{{duration: 1000}}"
                style="stroke:#ff3e00; stroke-width: 1.5"
                d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45'
            />
        </g>
    </svg>
{/if}

<label>
    <input type="checkbox" bind:checked={visible}>
    toggle me
</label>

<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">

<style>
    svg {
        width: 100%;
        height: 100%;
    }

    path {
        fill: white;
        opacity: 1;
    }

    label {
        position: absolute;
        top: 1em;
        left: 1em;
    }
</style>

실행시켜 보면 그림이 그려지는 것을 볼 수 있습니다. speed 속성을 0.1 ~ 1까지로 설정해 보시면 그려지는 속도가 달라지는 것도 확인할 수 있습니다.

자 이것으로 svelte에서의 transition에 대해서 알아봤습니다. transition의 경우 필수 기능은 아니지만, 적절히 사용하면 앱의 완성도를 높일 수 있는 기능이입니다. 각각의 transition의 특징을 잘 기억해서 유용하게 사용하시면 좋겠습니다 .

그럼 또 다른 내용으로 또 찾아오겠습니다. 감사합니다.

Svelte 기초 03 - slot

freeseamew — Wed, 20 Jul 2022 13:28:17 +0000

1. slot이란?

이번에 알아볼 Svelte의 기능은 slot입니다.

상태값과는 별개로 마크업 영역의 HTML이 반복적으로 사용될 때 재사용할 필요가 있는 경우도 종종 발생합니다. 이럴때 도움이 되는 기능이 바로 slot입니다.

예를 들어 다음과 같은 Card 컴포넌트를 계속해서 재사용해야 할 일이 있다고 가정해 보겠습니다. 기본적인 레이아웃은 변하지 않지만, 마크업 영역의 HTML내용은 계속 변경되어 사용되는 상황입니다.

넘겨지는 데이터의 경우 다음과 같은 h2, p 태그 안의 내용이 됩니다. 이와 같은 상황을 처리할 때 내용만을 props로 해서 전달하는 방법도 있습니다. 하지만 필요에 따라 컴포넌트 안에 사용되는 태그도 같이 변경된다면 어떨까요? 이런 상황을 props를 이용해 처리한다면 먼가 이상한 형태가 되고 말 것입니다.

자 그럼 slot을 어떻게 사용하면 되는지 간단한 예제로 알아보겠습니다. card.svelte라는 컴포넌트를 만들고 필요한 디자인 요소를 배치한 다음 card라는 div 영역을 만들어 주겠습니다.

다음으로 라는 영역을 만들어 주겠습니다. 이제 부터 해당 컴포넌트를 사용하는 곳에서 마크업을 작성하면 이 slot 안에 배치되게 됩니다.

<style>
    .card {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
        margin: 0 0 1em 0;
    }
</style>

<div class="card">
    <slot></slot>
</div>

그럼 이렇게 만들어진 Card컴포넌트를 사용해 보겠습니다. App.svelte에서 이 컴포넌트를 불러와 주겠습니다.

사용방법은 간단합니다. 말한것 처럼 다음과 같이 로 컴포넌트를 마크업으로 불러온 후

그 사이에 원하는 다른 HTML로 이루어진 내용을 입력하면 됩니다. 즉 으로 정의된 부분에 HTML 태그를 사용할 수 있습니다.

이렇게 slot을 이용하면 card컴포넌트의 디자인요소(CSS)를 쉽게 재사용할 수 있게 되는 것입니다.

<script>
    import Card from './card.svelte';
</script>

<Card>
    <h2>안녕하세요!</h2>
    <p>이곳은 내용이 들어가는 영역입니다.</p>
</Card>


<Card>
    <h2>Hello Svelte</h2>
    <p>Svelte를 배우는 여루분을 환영합니다.</p>
    <p>즐거운 코딩 되세요...</p>
</Card>

코드를 실행해 보시면 다음과 같은 결과가 나옵니다.

Card라는 컴포넌트 안에 우리가 원하는 마크업을 다시 작성해서 사용할 수 있는 것입니다. 이제 slot을 대략 어떤 용도로 사용하는지 조금은 아셨을 것입니다.

2. slot name 오션

이제 좀 더 실용적인 예제를 만들어 보도록 하겠습니다.

다음과 같이 card.svelte 컴포넌트를 다시한번 만들어 보겠습니다. 우선 style 영역을 만들고 컴포넌트에 필요한 css를 추가하겠습니다. 이번에도 해당 css들은 더보기로 되어 링크에서 복사해 사용하시면 됩니다.

그리고 마크업 영역에 , , 의 세가지 slot 영역을 만들어 주겠습니다.

card.svelte

<style>
.contact-card {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
    }

    h2 {
        padding: 0 0 0.2em 0;
        margin: 0 0 1em 0;
        border-bottom: 1px solid #ff3e00
    }

    .address, .email {
        padding: 0 0 0 1.5em;
        background:  0 50% no-repeat;
        background-size: 1em 1em;
        margin: 0 0 0.5em 0;
        line-height: 1.2;
    }

    .address { background-image: url(tutorial/icons/map-marker.svg) }
    .email   { background-image: url(tutorial/icons/email.svg) }
    .missing { color: #999 }
</style>

<article class="contact-card">
    <h2>
        <slot name="name">
            <span class="missing">이름 미입력</span>
        </slot>
    </h2>

    <div class="address">
        <slot name="address">
            <span class="missing">주소 미입력</span>
        </slot>
    </div>

    <div class="email">
        <slot name="email">
            <span class="missing">이메일 미입력</span>
        </slot>
    </div>
</article>

이 컴포넌트는 name, addrss, email 이라는 3가지의 slot영역을 가지게 됩니다.

이제 App 컴포넌트에서 name옵션을 이용해 slot을 사용하는 곳에서 명시적으로 배치할 slot을 지정할 수 있습니다. 이 card 컴포넌트를 이용해 앱을 실행해 보겠습니다.

App.svelte

<script>
    import Card from './card.svelte';
</script>

<Card>
    <span slot="name">
        홍길동
    </span>

    <span slot="address">
        서울특별시<br>
        여의도동
    </span>
</Card>

실행에 시키시면 각 slot 에 필요한 내용이 채워진 것을 볼 수 있습니다. 그리고 사용하지 않은 slot의 경우는card.svelte에서 설정한 기본 값으로 표시된 것을 볼 수 있습니다. 태그 아래에 이메일 미입력 이와 같이 기본값에 해당하는 HTML 요소를 입력하면 됩니다.

3. 조건에 따른 표현

slot으로 만들어진 컴포넌트를 불러와 사용할 경우 기본값을 이용해 입력하지 않은 내용에 대한 처리를 할 수 있었습니다. 이번에는 특정 slot을 사용했는지 아닌지를 체크할 수 있는 기능에 대해서 알아보겠습니다. '$$slots.slot이름' 을 통해서 slot정보를 받아올 수 있습니다. 그래서 이 정보의 유무를 체크하고 이를 통해서 특정영역을 보이고 안 보이게 하거나, 어떤 스타일(css)요소를 첨부하거나 하는 행동을 할 수 있습니다.

예제를 조금 수정해서 실행시켜 보겠습니다.

card.svelte

<style>
.contact-card {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
    }

    h2 {
        padding: 0 0 0.2em 0;
        margin: 0 0 1em 0;
        border-bottom: 1px solid #ff3e00
    }

    .address, .email {
        padding: 0 0 0 1.5em;
        background:  0 50% no-repeat;
        background-size: 1em 1em;
        margin: 0 0 0.5em 0;
        line-height: 1.2;
    }

    .address { background-image: url(tutorial/icons/map-marker.svg) }
    .email   { background-image: url(tutorial/icons/email.svg) }
    .missing { color: #999 }
</style>

<article class="contact-card">
    <h2>
        <slot name="name">
            <span class="missing">이름 미입력</span>
        </slot>
    </h2>

    <div class="address">
        <slot name="address">
            <span class="missing">주소 미입력</span>
        </slot>
    </div>
    {#if $$slots.email}
        <div class="email">
            <hr />
            <slot name="email"></slot>
        </div>
    {/if}
</article>

App.svelte 도 조금 수정해보겠습니다.

<script>
    import Card from './card.svelte';
</script>

<Card>
    <span slot="name">
        홍길동
    </span>

    <span slot="address">
        서울특별시<br>
        여의도동
    </span>
</Card>

<br/>

<Card>
    <span slot="name">
        홍길동
    </span>

    <span slot="address">
        서울특별시<br>
        여의도동
    </span>
    <span slot="email">
        myemail@google.com
    </span>
</Card>

실행해 보시면 slot으로 email을 사용한 경우와 경우와 사용하지 않은 경우 나타나는 형태가 다름을 알 수 있습니다.

지금까지의 기능만으로 정적인 마크업에 대해서는 어느정도 대응이 가능합니다.

이제는 좀 더 동적인 기능 들을 slot을 이용해서 구현해 보도록 하겠습니다. slot으로 만들어진 card컴포넌트에 마우스오버 이벤트가 발생하면 색상이 변하고 폰트의 두께도 변경하는 기능을 추가 해보겠습니다.

이를위해 card컴포넌트에 .hovering {} 스타일을 추가하고, 스크립트영역에 hovering 상태값, enter, leave메소드를 만든 다음 이와 같이 이벤트에 연결하도록 하겠습니다.

실행을 해보면 마우스를 올리면 다음과 같이 border가 나타나는 것을 확인할 수 있습니다.

card.svelte

<style>
    .contact-card {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
    }

    h2 {
        padding: 0 0 0.2em 0;
        margin: 0 0 1em 0;
        border-bottom: 1px solid #ff3e00
    }

    .address, .email {
        padding: 0 0 0 1.5em;
        background:  0 50% no-repeat;
        background-size: 1em 1em;
        margin: 0 0 0.5em 0;
        line-height: 1.2;
    }

    .address { background-image: url(tutorial/icons/map-marker.svg) }
    .email   { background-image: url(tutorial/icons/email.svg) }
    .missing { color: #999 }

    .hovering { background-color: #ffed99;}
</style>

<script>
    let hovering = false;
    const enter = () => hovering = true;
    const leave = () => hovering = false;
</script>


<article class="contact-card" class:hovering on:mouseenter={enter} on:mouseleave={leave}>
    <h2>
        <slot name="name">
            <span class="missing">이름 미입력</span>
        </slot>
    </h2>

    <div class="address">
        <slot name="address">
            <span class="missing">주소 미입력</span>
        </slot>
    </div>
    <div class="email">
        <slot name="email"></slot>
    </div>
</article>

4. slot에서 만들어진 상태값 전달받기

이번에는 현재 slot에서 만들어진 상태값인 hovering을 전달받아 사용하는 방법을 알아보겠습니다.

이를 위해 우선 card컴포넌트에서 email slot에서 마치 props로 값을 전달할 때처럼 { hovering } 을 전달합니다.

그리고 해당 컴포넌트를 사용하는 측에서는 let:hovering 으로 값을 받을 수 있습니다.

card.svelte

<style>
    .contact-card {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
    }

    h2 {
        padding: 0 0 0.2em 0;
        margin: 0 0 1em 0;
        border-bottom: 1px solid #ff3e00
    }

    .address, .email {
        padding: 0 0 0 1.5em;
        background:  0 50% no-repeat;
        background-size: 1em 1em;
        margin: 0 0 0.5em 0;
        line-height: 1.2;
    }

    .address { background-image: url(tutorial/icons/map-marker.svg) }
    .email   { background-image: url(tutorial/icons/email.svg) }
    .missing { color: #999 }

    .hovering { background-color: #ffed99;}
</style>

<script>
    let hovering = false;
    const enter = () => hovering = true;
    const leave = () => hovering = false;
</script>


<article class="contact-card" class:hovering on:mouseenter={enter} on:mouseleave={leave}>
    <h2>
        <slot name="name">
            <span class="missing">이름 미입력</span>
        </slot>
    </h2>

    <div class="address">
        <slot name="address">
            <span class="missing">주소 미입력</span>
        </slot>
    </div>
    <div class="email">
        <slot {hovering} name="email"></slot>
    </div>
</article>

이제 이렇게 전달받은 상태값에 따라 내용이 다르게 나타나게 할 수 있습니다 예제에서는 hovering이 true일 대 메일 주소에 b 태그가 나타나도록 했습니다.

App.svelte

<script>
    import Card from './card.svelte';
</script>

<Card let:hovering>
    <span slot="name" >
        홍길동
    </span>

    <span slot="address">
        서울특별시 여의도동
    </span>
    <span slot="email">
        {#if hovering}
            <b>myemail@google.com</b> 
        {:else}
            myemail@google.com
        {/if}
    </span>
</Card>

실행시켜 보시면 마우스오버시 card컴포넌트 에서는 배경색이 변경되고, App.svelte의 email slot에서 적용한 태그가 적용되는 것을 볼 수 있을 것입니다.

5. svelte:fragment

마지막으로 알아볼 slot의 기능을 fragment입니다.

다음 코드를 보면 widget이라는 컴포넌트를 불러와 사용하고 있습니다. 여기에서 footer를 보면 이 slot footer를 사용하기 위해서 임의의 div를 만들 수 밖에 없는 상황인 것을 확인할 수 있습니다. 즉 의미없는 div가 추가되는 것으로 이때문에 디자인 요소등이 틀어질 가능성도 있습니다.

<!-- Widget.svelte -->
<div>
    <slot name="header">No header was provided</slot>
    <p>Some content between header and footer</p>
    <slot name="footer"></slot>
</div>

<!-- App.svelte -->
<Widget>
    <h1 slot="header">Hello</h1>
    <div slot="footer">
        <p>All rights reserved.</p>
        <p>Copyright (c) 2019 Svelte Industries</p>
    </div>
</Widget>

이런경우에 특정 dom으로 감싸지 않고 바로 명명된 slot을 사용할 수 있는 방법이 바로 fragment입니다. 이용방법은 간단합니다. 다음과 같이 div로 되어 있는 곳을 svlete:fragment로 감싸주기만 하면 됩니다. 이를 이용하면 필요없는 돔 요소를 만들지 않고도 slot을 사용할 수 있다는 것을 기억하시기 바랍니다.

<!-- Widget.svelte -->
<div>
    <slot name="header">No header was provided</slot>
    <p>Some content between header and footer</p>
    <slot name="footer"></slot>
</div>

<!-- App.svelte -->
<Widget>
    <h1 slot="header">Hello</h1>
    <svelte:fragment slot="footer">
        <p>All rights reserved.</p>
        <p>Copyright (c) 2019 Svelte Industries</p>
    </svelte:fragment>
</Widget>

현재 프론트엔드 프레임워크들은 컴포넌트들을 좀 더 효율적으로 개발할 수 있는 방향으로 발전하고 있습니다. 이런 관점에서 Svelte의 slot은 마크업영역을 효율적으로 재사용할 수 있게 도와주는 훌륭한 API입니다. slot과 같은 장치들이 처음에는 조금 어색할 수 있습니다. 하지만 이런 장치들을 자신이 만들려는 웹앱의 어떤 부분들에 사용하면 좋을지에 대한 고민을 하고 적용해 보시면, 좀 더 효율적인 개발이 가능할 것입니다.

그럼 다음에 또 svelte에 대한 다른 주제로 찾아오겠습니다. 감사합니다.

Svelte 기초 02 - Store

freeseamew — Wed, 13 Jul 2022 05:55:42 +0000

이번에는 svelte의 전역상태 관리도구인 store에 대해서 알아보겠습니다. 스토어는 전역으로 사용가능한 상태값 저장소입니다. 앱을 만들다보면 컴포넌트에서 사용되는 상태값이 여러개의 다른 컴포넌트에 영향을 주는 일이 자주 발생합니다.

만약 다음과 같은 컴포넌트 구조의 앱이 있다고 할 때 7번 컴포넌트에서 무언가 값을 변경해 10번에 전달해야 한다면 기존 props를 이용해서 통신을 할 경우 다음과 같은 과정이 필요할 것입니다. 이 과정은 결코 효율적이라고는 할 수 없습니다.

이럴경우 스토어를 만들고 모든 컴포넌트가 이 스토어를 바라보게 만들면, 아주 쉽게 컴포넌트간 공유할 수 있는 상태값을 만들고 제어할 수 있습니다. 컴포넌트가 스토어를 바라보게만 한다면 상위 또는 하위 컴포넌트를 거치지 않고 바로 상태값을 변경할 수 있습니다.

이 스토어를 만들고 사용하는 방법을 알아보겠습니다. 사용하는 방법은 우선 스토어로 사용할 파일을 만드는 것입니다. 보통 stores.js 라는 파일을 만들고 사용합니다. 그리고 Svetle/store의 writable 모듈을 가져와야 합니다. 여기서 writable은 스토어의 종류중에서 가장 많이 사용되는 기본 형태의 스토어정의 모듈입니다. 그리고 const로 스토어이름을 정의하고 writable로 스토어를 생성하면 됩니다. 이때 초기값을 설정할 수 있습니다. 이렇게 만들어진 스토어는 외부에서 import 불러 사용하면 됩니다.

그럼 이제부터 간단한 예제를 통해서 이 스토어의 사용방법을 자세히 알아보겠습니다.

import { writable } from 'svelte/store';

export const 스토어이름 = writable(스토어기본값)

[ + - 예제앱 ]

이예제는 count라는 스토어를 가지고 + 버튼을 클릭하면 count가 증가되고 , - 버튼을 클릭하면 이 count 값이 감소하는 기능을 가집니다. 그리고 변경된 count값은 화면에 바로 표시됩니다.

우선 stores.js 라는 파일을 만들고 스토어부터 만들어 보도록 하겠습니다. 스토어를 정의 하기 위해서는 svelte/store에서 writable을 import로 불러와야 합니다 .

stores.js

import { writable } from 'svelte/store';

export const count = writable(0);

이제 이 스토어를 참조할 컴포넌트들을 만들겠습니다. 먼저만들 컴포넌트는 count를 증가시키는 역할을 하는 increment 컴포넌트입니다. 스크립트 영역을 만들고 import를 이용해서 stores.js에서 count를 불러오겠습니다. 여기에 onIncre라는 실제로 count를 증가시키는 역할의 메소드를 만들어 주겠습니다.

스토어의 값을 변경하는 가장 기본적인 방법은 스토어값을 변경하고 다시 재할당 시키는 것입니다. 그래서 count스토어에 +1을 하고 이값을 다시 count스토어에 할당시키겠습니다. 이때 스토어의 값의 경우 일반적인 상태값과 달리 앞에 꼭 달러($)기호를 사용해야 합니다.

다음으로 마크업영역에서 button을 만들고, 이 버튼에 on:click이벤트를 작성하고 여기에 onIncre 메소드를 연동해주겠습니다.

increment.svelte

<script>
    import { count } from './stores.js';

    const onIncre = () => {
        $count = $count + 1;
    }
</script>

<button on:click={onIncre}>+</button>

다음은 count를 감소시키는 역할의 컴포넌트인 decrement 컴포넌트를 만들겠습니다. 이번에도 역시 스크립트 영역에 count스토어를 import 가져오는 것으로 시작하겠습니다. 여기에 onDecre라는 count를 감소하는 역할의 메소드를 만들고 마찬가지고 count 스토어에 -1을 한 후 다시 count에 재할당해주도록 만들겠습니다.

마크업영역에서도 button을 만들고 여기에 on:click 이벤트에 onDecre 메소드를 연동해 주도록 하겠습니다.

decrement.svelte

<script>
    import { count } from './stores.js';

    const onDecre = () => {
        $count = $count - 1;
    }
</script>

<button on:click={onDecre}>-</button>

세번째로 만들 컴포넌트는 현재 count값을 표현해 주는 countResult컴포넌트 입니다. 스크립트 영역을 만들고 count컴포넌트를 불러오겠습니다.

다음으로 마크업여역에서 현재 count를 표시해 주겠습니다. 마크업영역에서 스토어를 사용하기 위해서는 마찬가지로 대괄호 안에 $(달러) 스토어이름 즉 $count라고 하면 됩니다. 이렇게 사용된 스토어의 값의 경우 변경이 되면 바로 변경된 값이 반영됩니다.

countResult.svelte

<script>
    import { count } from './stores.js';
</script>

<h1>현재 count는 {$count} 입니다.</h1>

이제 App.svelte에 이렇게 만들어진 컴포넌트를 import 불러오고 마크업영역에 각각의 컴포넌트들을 배치하도록 하겠습니다.

App.svelte

<script>
  import Increment from './increment.svelte';
  import Decrement from './decrement.svelte';
  import CountResult from './countResult.svelte'
</script>

<CountResult />
<Increment />
<Decrement />

이제 앱을 실행해 보도록 하겠습니다.

[ 실행결과로 ]

결과를 보면 + 버튼을 클릭하면 count가 증가하고 - 버튼을 클릭하면 count가 감소하는 것을 볼 수 있습니다.

이것으로 알 수 있는 것은 스토어의 값을 참조하고 조작하면 해당 스토어를 바라보는 모든 컴포넌트에 동시적으로 스토어의 값이 적용되는 것을 확인할 수 있습니다. 일반적인 props을 이용해서 컴포넌트간 통신을 하는 방법보다 훨씬 편리한 기능입니다.

스토어의 상태값은 이처럼 외부에서 직접 상태값을 조작할 수 도 있지만 스토어 내부에 사용자정의 메소드를 만들어 해당 메소드를 호출하는 방식으로 조작할 수 도 있습니다.

그럼 이제 부터 사용자 정의 메소드를 만들어 스토어를 조작하는 방법을 알아보겠습니다.

다시 stores.js를 열고 우선 createCount라는 스토어 정의 함수를 만들겠습니다. 그리고 여기에 writable에서 필요한 요소인 subscribe, set, update를 사용할 수 있게 준비하고, 초기값으로 0을 설정합니다.

참고로 writable 스토어는 다음과 같은 기본 메소드를 가지고 있습니다.

subscribe: 스토어의 값이 변경되면 자동으로 반영하는 역할을 합니다.
set: store의 값을 초기화하는 옵션입니다.
update: set이 전체를 초기화 한다면, update는 값의 일부만 변경시키는 역할을 합니다. 주로 커스텀 메소드를 만들 때 사용되는 기능
get: 자신 또는 다른 스토어의 값을 가져올 때 사용

이제 사용자 정의 메소드로 count를 증가하는 역할의 increment, 감소하는 역할의 decrement 그리고 초기화 시켜주는 역할을 할 reset을 위한 함수들을 만들어 주겠습니다.

우선 increment의 경우 update라는 것을 통해서 count스토어 값을 변경하겠습니다. update의 사용방법은 스토어 값을 불러와 조작한 후 조작된 값을 리턴시켜 주는 것으로 수정이 이루어 집니다. 참고로 화살표 함수의 경우 한줄로 사용할 경우 자동으로 리턴이 되게 됩니다. 그래서 count를 받아와 count에 +1을 하고 리턴시켜도록 하겟습니다.

같은 방법으로 decrement도 작성하겠습니다. 그리고 reset의 경우는 값을 초기화 시켜주는 메소드 이므로 set을 이용해 원하는 값으로 만들어 주면 됩니다 .여기서는 0으로 초기화 시켜 주겠습니다. .

이렇게 만들어진 사용자 정의 메소드는 return을 시켜 주어야 합니다. 그리고 이 메소드들과 함께 외부에서 사용할 writable의 기본 기능들도 리턴에 포함시켜야 합니다. 이번예제의 경우 스토어값을 변경되면 바로 적용하는 subscribe만을 리턴에 포함시키도록 하겠습니다.

참고로 외부에서 만약 따로 조작이 필요할 경우 set이나 update를 리턴해야 하는 경우도 있을 수 있습니다

이제 export할 count에 지금 우리가 작성한 createCount()함수를 연결해 주면 되겠습니다. 이제 이 사용자 정의 메소드들을 외부 컴포넌트에서 사용해 보겠습니다.

stores.js

import { writable } from 'svelte/store';

function createCount() {
    const { subscribe, set, update } = writable(0);

    // 사용자 정의 메소드
    const increment = () => update(count => count + 1);
    const decrement = () => update(count => count - 1);
    const reset = () => set(0);

    return {
        subscribe,
        increment,
        decrement,
        reset
    };
}

export const count = createCount();

increment컴포넌트를 열어주겠습니다. 현재 count를 직접 조작하도록 되어있는 부분을 지우고, 우리가 만든 decrement() 메소드로 변경하겠습니다. 사용방법은 스토어이름에 메소드이름을 사용하면 됩니다.

increment.svelte

<script>
    import { count } from './stores.js'

    const onIncre = () => {
        count.increment();
    }
</script>

<button on:click={onIncre}>
    +
</button>

같은 방법업으로 decrement컴포넌트도 열고 기존의 스토어 제어부분을 지우고 decrement메소드를 적용하도록 하겠습니다.

decrement.svelte

<script>
    import { count } from './stores.js'

    const onDecre = () => {
        count.decrement();
    }
</script>

<button on:click={onDecre}>
    -
</button>

이제 결과를 실행시켜 보겠습니다. 작성한 코드가 정상이면 이상없이 작동하는 것을 볼 수 있습니다 .

실행결과는 같지만, 스토어의 값을 외부컴포넌트에서 직접조작하기보다 이런식으로 사용자 정의 메소드를 만들어 사용하는 것이 오류를 줄일 수 있고 재사용도 가능하여 좀 더 효율적일 수 있습니다.

자 이제 store에 대해서 어느정도 이해가 되었을 것입니다. 그럼 다음시간에 또다른 Svelte의 핵심기능으로 찾아오도록 하겠습니다.

감사합니다.

📺 유튜브 채널: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw

✍️ 블로그1: https://dev.to/freeseamew

🖍 블로그2: https://medium.com/@freeseamew

📖 출판 도서

🖥 온강라강 강좌

GraphQL 완전정복: https://www.inflearn.com/course/graphql-완전정복?inst=ad1d8573

Svelte 기초 01 - 필수 요소들

freeseamew — Tue, 12 Jul 2022 14:59:00 +0000

지금부터 프런트엔드 프레임워크 Svelte에 대해서 알아보도록 하겠습니다. 현재 프론트엔드 프레임워크로 잘 알려진 것들로는 react, vue, angular라는 제품들이 있고, 그 뒤를 이어 새롭게 떠오른 제품이 바로 이 svelte 입니다. 각각의 프레임워크들은 그에 맞는 특성있습니다. 이중에서 우리가 사용할 svelte의 가장큰 특징중 하나는

write less code

즉 다른 프레임워크들 보다 적은 코드고 결과를 만들 수 있는 간결함입니다. 사실 이럴때는 장황한 설명보다 한줄의 코드를 보는게 효율적일 때가 있습니다
코드 비교 이미지

다음은 svelte와 함께 react, vue의 상태값을 비교한 코드입니다. 이 코드는 프런트엔드의 핵심중에 하나인 상태값을 각가의 프레임워크로 표현한 부분인데 다른 프레임워크와 달리 svelte의 경우 그냥 자바스크립트 변수선언 방법인 let을 사용한게 전부입니다.

특히 스크립트 영역에서는 프런트엔드를 다루기 위해서 특별한 문법을 배울 필요가 거의 없습니다. 그리고 마크업 영역에서는 간단하게 나마 HTML을 작성을 동적으로 만드는 몇몇 장치만 배우면 바로 사용이 가능할 정도로 심플한 구조를 가지고 있습니다.
그래서 개인적으로는 처음 frontend를 접하는 사용자들에게 적극적으로 추천하는 프레임워크 입니다.

이제부터 간단하게 svelte에 대해서 알아보도록 하겠습니다. 여기서 svelte의 모든 다루기는 힘들겠지만, 중요한 기능에 대해서 요약 설명은 드릴 수 있을 것 같습니다.

상태값(State)

첫번째로 학습할 요소는 state 즉 상태값입니다. svelte 아니 프런트엔드라는 것을 배울 때 가장 기본이 되는 중요한 개념이 바로 상태값입니다. 그래서 이 상태값 부터 알아보도록 하겠습니다.
사실 모든 프론트엔드 프레임워크의 구동방식은 비슷합니다. 자바스크립트로 state라고 하는 상태에 해당하는 어떤 변수들을 두고 이 state의 상태에 따라 html과 css로 화면을 만들어 가는 것입니다.
자 다음 코드를 보시겠습니다.

<script>
  let count = 0;

  function handleClick() {
    // 이벤트 코드
    count += 1;
  }

  </script>

  <button on:click={handleClick}>
    클릭수 { count } 
  </button>

코드에서 let count = 0 이라고 되어 있는 부분이 상태를 나타내는 state입니다. 이 state값은 html 영역에서 { 상태값 이름 } 이런 식으로 표현할 수 있습니다.

또 함수 handleClick()은 상태값인 count에 1을 더하는 역할을 하는 메소드입니다. 이 함수 형태의 메소드를 이용해서 상태값을 변경하게 되는 것입니다. 여기서 handleClick메소드는 마크업영역에서 on:click 이벤트에 연동해 실제 마우스 클릭 이벤트를 감지해서 작동하게 됩니다.

그리고 변경된 상태값은 바로 적용되어 이 상태값을 사용하는 곳에 반영되게 됩니다.
그럼 이 코드를 실제로 작성해 보도록 하겠습니다. svelte에서는 실습을 위해 REPL이라는 환경을 제공하고 있습니다. 다음 사이트에서 코드를 입력해서 별다른 설치 없이 바로바로 결과를 확인할 수 있습니다.
참고로 이 코드는 다음 링크에서 직접 실행해 볼 수 도 있고 변화를 줘서 실행도 가능합니다.

https://svelte.dev/repl/hello-world?version=3

여기서 알 수 있듯이 마크업영역에서는 몇가지 간단한 장치를 사용하긴 했지만 스크립트의 경우 100%자바스크립트로 작성한 것을 볼 수 있습니다. 참고로 상태값의 경우 기본이 되는 변수는 물론 배열, 객체 객체의 배열 형태가 되도 상관없습니다. 자바스크립트에서 사용할 수 있는 대부분의 데이터형태를 사용할 수 있다고 생각하시면 됩니다.

Reactivity

이번에는 Svelte의 핵심기능중에 하나인 Reactivity 즉 반응성에 대해서 알아보겠습니다. svelte에서는 $: 기호를 이용해서 reacivity적인 기능들을 쉽게 구현할 수 있습니다. 몇안되는 추가 문법이라고 생각하시면 됩니다.

그럼 이 반응성기호를 이용해 코드를 조금 더 확장해 보겠습니다. 이 반응성기호($:)는 svelte의 특징 적인 코드중에 하나로 선언형 패턴의 코드입니다. 이것은 일종의 센서 같은 역할을 한다고 생각하시면 되겠습니다.
그럼 코드를 자세히 살펴보겠습니다.

<script>
  let count = 0
  $: doubled = count * 2

  $: if(count >= 10) {
    alert('카운트가 10을 넘었습니다. ')
    count = 9
  }

  $: {
    console.log( count )
    console.log( doubled )
  }

  function handleClick() {
    // 이벤트 코드
    count += 1
  }

</script>

<button on:click={handleClick}>
  클릭수 { count } {count === 1 ? 'time' : 'times'}
</button>

<p>{count} 두배는 {doubled} <p/>

우선 가장 기본이 되는 doubled부터 보겠습니다. 일반적인 상태값이 let으로 선언되는 것과 달리 doubled는 반응성 기호로 선언되었습니다. 그래서 doubled는 count가 변경될 때마다 이를 감지하고 해당 count에 곱하기 2를 한 값이 됩니다.
반응성 기호($:)는 변수 뿐만 아니라 대괄호{} 로 감싸서 특정 영역에 영향을 줄 수도 있습니다. 예제의 경우 반응성 기호 안의 console.log들은 값이 변경되면 log를 나타나게 됩니다.

또 심지어 조건문과 사용해도 됩니다. 예제에서는 count가 10보다 같거나 클 경우 alert을 나타내고 count값을 9로 변경시키게 되는 것을 알 수 있습니다.
이것은 마치 화제 경보기에 열이 감지되면 스프링클러에서 물이 발사되는 것과 비슷한 작용입니다. 일반적인 프로그램에서의 호출과 달리 선언만 하면 그에 맞는 환경에 따라 작동하는 것입니다.

그리고 마크업 영역의 경우 기본적으로 상태값과 연계되어 상태값의 변화에 따라 돔이나 내용들이 보여지게 됩니다. 예제의 경우 count와 doubled는 변경이 되면 해당 변경된 값이 표현되었고 count의 상태에 따라 time, times가 표시되는 것입니다.

자 그럼 코드를 실행해 보겠습니다.

버튼을 클릭해 보면

doubled는 count의 값의 2배값을 표시해 주고,
console에 log에 변경된 count와 doubled가 표시되며,
count 10보다 크거나 같으면 alert를 발생합니다.
또 마크업영역에서는 count가 1과 같으면 time 1이 아닐경우 times라고 글을 표시해주기도 합니다.

자 이처럼 반응성 기호로 변수나 영역을 만들고 선언을 하면 대상이 되는 상태값의 변화를 감지해 필요한 행동을 할 수 있게 만들 수 있습니다. 따라서 반응성 기호를 잘 활용하면 복잡한 기능들의 연계를 쉽게 구현할 수 있게 되는 것입니다.

예제에서 볼 수 있듯이 우리는 count라는 상태값을 변경시키는 액션 만을 취하지만,
count가 변경되면 count를 바라보고 있는 다양한 곳에서 그에맞는 일들을 자동으로 처리됩니다.이런식으로 직접적인 call없이 자동으로 변화를 감지하고 대응되도록 하는 패턴을 선언형 프로그램이라고도 합니다.

현실세계로 비유하자면 일반적인 프로그램방식이 물을 수동으로 틀었다 잠그는 샤워기와 비슷하다면 이 선언형 방식의 경우 불이나면 자동으로 물을 뿌려주는 화재경보기와 비슷하다고 할 수 있습니다.

프런트엔드를 개발하다 보면 이런 반응성적인 특성이 필요할 때가 많습니다. 메일 시스템을 만든다고 가정해보면 새로운 메일 시스템이 들어오면 화면에 알람을 나타내고, 메일의 개수를 표시하는 각종 카테고리에 수를 더해서 표시해야 하며 새로운 메일을 목록에 추가해서 보여주어야 할 것입니다. 이런상황에서 선언형 처리를 할 수 있다면 기존의 방법보다 훨씬 편하게 개발을 할 수 있을 것입니다.

component

svelte를 포함한 대부분의 프론트앤드 프레임워크는 SPA(single page application)의 구조를 가집니다. 하나의 페이지에 필요에 따라 다양한 컴포넌트를 배치해서 사용하는 구조가 SPA입니다.

이런 SPA구조의 앱을 만들 때 페이지가 하나라고 해서 하나의 페이지에 모든 내용을 넣는 것은 효율적이지 못합니다. 그래서 component라는 작은 블록을 만들고 그 블록을 조합해 가면서 화면을 구성하는 방식을 가집니다.

일반적인 블로그나 사이트의 경우로 보자면 상단의 Header, 사이드의 aside, 내용의 content, 하단의 footer로 구성됩니다. 그리고 contet에는 개별 post가 독립된 compoent로 구성할 수 있을 것입니다.

하나의 컴포넌트에는 javascript, html, css가 포함될 수 있고, 재사용도 가능합니다. 이런 컴포넌트는 필요에 따라 만들어지 부품으로 현실세계의 레고블록과 비슷하다고도 볼 수 있습니다.

또 이렇게 컴포넌트가 모여서 하나의 앱이 되는 형태이므로 완성된 앱은 구조상 트리구조를 가집니다. App.svelte라는 제일 상위 컴포넌트가 있고, 거기에서 가지가 뻗어 나가듯 다양한 컴포넌트가 위치하게 되는 구조입니다.

그럼 실제 코드를 작성해서 svelte에서 컴포넌트를 만들고 사용하는 방법을 알아보겠습니다. 만들어진 컴포넌트는 자바스크립트 import를 이용해 가져올 수 있습니다 . 이때 불러온 컴포넌트는 대문자로 시작하게 이름을 작성해야 합니다. 그리고 배치의 경우는 일반적인 태그처럼 배치하여 사용하면 됩니다.

app.svelte

<script>
  import Header from './header.svelte';
  import Content from './content.svelte';
  import Footer from './footer.svelte';
</script>

<Header />
<Content />
<Content />
<Footer />

header.svelte

<h1>Header Compoent</h1>

content.svelte

<p>Content Component</p>

footer.svelte

<h2>Footer Component</h2>

이렇게 배치된 컴포넌트들은 서로 통신을 하면서 필요한 데이터를 교환합니다. 다른 컴포넌트에서 상태값을 전달하는 가장 기본적인 전달방법은 props입니다. 이 props의 경우 상위 컴포넌트에서 하위컴포넌트로 상태값을 전달하는 것으로 단방향 바인딩의 성격을 가집니다.

사용방법은 컴포넌트에 대괄호 안에 상태값의 이름을 작성하는 것으로 값을 넘길 수 있고받는 측에서는 export let을 이용해 값을 받을 수 있습니다. 이 props의 경우 말한 것처럼 단방향적인 성격을 가집니다. 그래서 만약 하위 컴포넌트에서 상위 컴포넌트의 상태값(state)를 변경할 경우 상위 컴포넌트에서 변경과 관련된 메소드를 만들고 이 메소드를 상태값과 같은 방법으로 전달하여 사용해야 합니다. 이말은 하위 컴포넌트에서 전달받은 상태값을 그냥 변경해 버릴 경우 상위 컴포넌트의 상태값은 변경되지 않는 다는 의미입니다. 그래서 props를 이용한 상태값의 제어의 경우 꼭 상태값이 위치한 상위컴포넌트에서 이처럼 메소드를 만들고 그 메소드를 전달해서 제어를 해야 합니다.

app.svelte

<script>
  import BtnClick from './btnClick.svelte';
  let count = 0;

  function handleClick() {
    // 이벤트 코드
    count += 1;
  }

</script>

<BtnClick {count} {handleClick} />

btnClick.svelte

<script>
  export let count;
  export let handleClick;
</script>

<button on:click={handleClick}>
  클릭수 { count } 
</button>

그럼 조금전 만든 예제의 코드를 분리해서 기능에 따라 컴포넌트로 만들어 보도록 하겠습니다.

example-app
└── App.svelte
    ├── countComp.svelte
    └── btnComp.svelte
          └── labelComp.svelte

우선 제일 상위 컴포넌트인 App.svelte에서 기본 상태값 count를 기본값 0으로 작성하고 반응성기호를 이용해 doubled를 만들고 count *2를 해주겠습니다. 여기에 역시 반응성기호로 count가 10보다 커질경우 alert을 나타내는 코드 그리고 count값을 변경하는 handleClick메소드를 작성하겠습니다. 그리고 CountComp와 btnComp 컴포넌트를 import가져오고 props를 이용해 btnComp에는 count와handleCliek를 전달하고 CountComp 컴포넌트에는 count와 doubled를 props로 전달하겠습니다

App.svelte

<script>
  import CountComp from './countComp.svelte'
  import BtnComp from './btnComp.svelte';


  let count = 0
  $: doubled = count * 2

  $: if(count >= 10) {
    alert('카운트가 10을 넘었습니다. ');
    count = 9;
  }

  function handleClick() {
    // 이벤트 코드
    count += 1;
  }
</script>

<BtnComp {count} {handleClick} />
<CountComp {count} {doubled} />

다음으로 countComp 컴포넌트를 작성하겠습니다. export let으로 count와 doubled를 전달받고 이번에도 반응성 기호로 console.log를 작성해서 count와 doubled의 변화가 감지되면 로그를 기록하게 하겠습니다.
또 마크업영역에서는 count와 doubled의 값이 나타나게도 해주겠습니다.

countComp.svelte

<script>
  export let count;
  export let doubled;

  $: {
    console.log( count )
    console.log( doubled )
  }

</script>

<p>{count} 두배는 {doubled} <p/>

btnComp컴포넌트도 작성하겠습니다. export let을 이용해서 count, handleClick를 전달받고 또 다른 하위 컴포넌트로 labelComp 컴포넌트를 불러와 주겠습니다.

마크업 영역에서 onclick이벤트에 handleClick를 연동하고 버튼의 내용에 count와 함께 labelComp컴포넌트를 배치하겠습니다.
그리고 labelComp 컴포넌트에 다시 count를 전달하겠습니다.

btnComp.svelte

<script>
  export let count;
  export let handleClick;
  import LabelComp from './labelComp.svelte';

</script>

<button on:click={handleClick}>
  클릭수 { count } <LabelComp {count} />
</button>

마지막으로 labelComp컴포넌트에는 count를 전달받고 count의 값이 1보다 작거나 같으면 time을 아닐경우는 times가 표시되도록 해주겠습니다.

labelComp.svelte

<script>
  export let count
</script>

{count <= 1 ? 'time' : 'times'}

이렇게 전달된 props는 결국 App에서 변경이 되고 변경이 되면 다시 하위 컴포넌트로 전달되는 구조입니다. 이미 설명 한 것처럼 이런 방식을 단방향 바인딩(one way binding) 이라고도 합니다. 이것은 react, vue 같은 frontend framework에서도 널리 사용되는 통신 패턴입니다. 핵심은 상위 컴포넌트에서 하위 컴포넌트로만 변화를 전달할 수 있다는 것을 기억하시기 바랍니다.

이 props를 이용하면 상하 관계의 state의 조작은 용이하지만, 수평관계이거나 혹은 컴포넌트끼리의 거리가 아주 먼 경우도 발생합니다. 이때는 context, dipatcher 그리고 store라는 것을 사용해 통신을 할 수 있습니다. 참고로 이번 강좌에서는 이 전역 컴포넌트 통신에 store를 적극적으로 사용할 것입니다.

html 돔 제어

이번에는 html영역을 효율적으로 만들어 주는 기능들을 알아보겠습니다.

위에서도 설명했지만, frontend는 결국 상태값에 따라 화면을 그려주는 역할이 메인입니다. 그래서 svelte에서는 그 화면 득 html 돔을 효율적으로 제어하게 도와주는 기능을 제공합니다.

첫번째는 논리블록({#if..}) 입니다.

논리블록은 일반적인 프로그램의 if와 같습니다. 단지 script영역에서 사용하는 것이 아니고, html영역 즉 마크업영역에서 상태값(state)에 따라 분기를 나누고 표현하는 기능을 가집니다.

그럼 예제를 보도록 하겠습니다. 이번 예제의 경우 auth.loggedIn의 상태에 따라 메시지가 달라지는 기능을 수행합니다. 이런식으로 상태값에 따라서 돔을 제어해야할 때 사용하면 좋은 기능이 svelte의 논리블록입니다.

<script>
let auth = {
  loggedIn: false
}

const handleLogin = () => auth.loggedIn = true;
const handleLogout = () =>  auth.loggedIn = false;

</script>

<button on:click={handleLogin} >Log In</button>
<button on:click={handleLogout} >log Out</button>

{#if auth.loggedIn === true}
  <p> 로그인 중입니다. </p>
{:else }
  <p> 로그아웃 중입니다. </p>
{/if}

두번째로 반복블록({#each...}) 입니다.

일반적인 프로그램의 for같은 반복문의 기능을 html영역에서 실행시켜 주는 역할을 합니다. 예제를 통해 알아보도록 하겠습니다. 예제를 보면 todos라는 객체의 배열로 된 상태값이 있습니다. 우리는 이 객체의 내용을 마크업 영역에 출력해보겠습니다.

<script>
  let todos = [
    {
      id:0,
      content: '첫 번째 할일',
      done: false
    },
    {
      id:1,
      content: '두 번째 할일',
      done: false
    },
    {
      id:2,
      content: '세 번째 할일',
      done: true
    },
    {
      id:3,
      content: '네 번째 할일',
      done: false
    }
  ]
</script>

<ul>
    {#each todos as todo}
      <li>
        <span>{todo.id}</span>
        <span>{todo.content}</span>
      </li>
    {/each}
</ul>

이 반복블록을 이용하면 이런 배열 형태의 상태값을 쉽게 연속해서 출력할 수 있습니다 상품리스트나, sns의 글목록등을 나타날때 아주 편리한 기능이라고 생각하시면 됩니다.

이것으로 Svelte를 사용하는데 필요한 기본적인 기능들을 모두 알아봤습니다. 다음시간에는 svelte의 또다른 핵심기능 중에 하나로 컴포넌트간 전역통신에 사용하는 store에 대해서 알아보도록 하겠습니다.

📺 유튜브 채널: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw

✍️ 블로그1: https://dev.to/freeseamew

🖍 블로그2: https://medium.com/@freeseamew

📖 출판 도서

🖥 온강라강 강좌

GraphQL 완전정복: https://www.inflearn.com/course/graphql-완전정복?inst=ad1d8573