2024년 10월 20일 Svelte 5가 출시되었다. 기존 회사에서 Svelte 4를 사용하여 프로젝트를 진행 중이었는데 이번에 Svelte 5로 마이그레이션을 하게 되었다. 이에 따라 공부를 하면서 한글로 정리된 정보는 많이 없는 것 같아 벨로그에 Svelte5가 되며 달라진 점을 정리해 보려고 한다.

🔥 Svelte5는 뭐가 다를까?

"Svelte 5의 핵심 변화" Svelte 5에서는 보다 직관적인 API와 성능 최적화를 목표로 큰 변화를 가져왔다.

• 반응성 모델 변경: $state(), $derived(), $effect() 도입
• Props & 이벤트 개선: $props(), $bindable() 지원
• 컴포넌트 구조 최적화: slot 대신 children props 사용
• 렌더링 최적화: Fine-Grained Reactivity 도입

이제 하나씩 상세히 알아보도록 하자.

🌿 State

$state()

반응형 변수일 경우 $state()를 사용하여 반응형 상태임을 명시한다.

🏃‍♀️‍➡️ Svelte4

<script>
    let count = 0;
</script>

🏃‍♂️‍➡️ Svelte5

<script>
    let count = $state(0);
</script>

Svelte 4 vs Svelte 5

즉, Svelte 5에서는 $state()를 통해 더 직관적인 상태 관리를 제공하면서, 렌더링 성능도 최적화되었다.

🌿 Computed State

$derived()

반응형 계산일 경우 $derived()를 사용하여 명확히 선언한다. 복잡한 연산(여러 개의 반응형 상태를 조합하여 새로운 값을 만들 때)는 $derived.by()를 사용한다.

🏃‍♀️‍➡️ Svelte4

<script>
    let count = 10;
    $: doubleCount = count * 2;
</script>

<div>{doubleCount}</div>

🏃‍♂️‍➡️ Svelte5

<script>
    let count = $state(10);
    const doubleCount = $derived(count * 2);
    let total = $derived.by(() => {
           // code...
    });
</script>

<div>{doubleCount}</div>

Svelte 4 vs Svelte 5

Svelte 5에서는 $derived()를 통해 불필요한 재계산을 줄이고, 더 최적화된 반응형 상태 관리를 제공하게 되었다.

🌿 Life Cycle methods

$effect()

$effect()를 활용해 라이프사이클과 반응성을 더욱 직관적으로 관리할 수 있다.

🏃‍♀️‍➡️ Svelte4

<script lang="ts">
    import { onMount } from "svelte"

    onMount(() => {
        // code...
    });
</script>

🏃‍♂️‍➡️ Svelte5

<script lang="ts">
    $effect(() => {
        // code...
    });
</script>

Effect Rune은 Svelte5에서 반응성을 처리하는 새로운 방식 중 하나다. $effect는 참조된 반응형 변수(State)가 변경될 때마다 실행된다. (Untrack을 사용하지 않는 이상 😥) 이러한 특성으로 인해 API 호출, DOM 조작 등 사이드 이펙트에만 사용해야 하고, 반응형 변수를 기반으로 새로운 값을 계산하는 용도로 쓰면 안 된다.

🏃‍♀️‍➡️🏃‍♂️‍➡️ $effect를 사용해 반응형 값을 계산하는 예시

<script lang='ts'>
    let total = 100;
    let spent = $state(0);
    let left = $state(total);

    $effect(() => {
        left = total - spent;
    });

    $effect(() => {
        spent = total - left;
    });
</script>

이처럼 작성할 경우 두 $effect가 서로 값을 갱신하면서 무한 루프가 발생할 위험이 있다. Svelte5에서는 이를 방지하기 위해 $derived를 사용하거나 직접 함수로 변경하는 것이 더 적절하다고 말한다. 위 코드를 함수로 변경해 보자.

🏃‍♀️‍➡️🏃‍♂️‍➡️ 함수 기반으로 값을 계산하는 예시

<script lang='ts'>
    let total = 100;
    let spent = $state(0);
    let left = $state(total);

    function updateSpent(e) {
        spent = +e.target.value;
        left = total - spent;
    }

    function updateLeft(e) {
        left = +e.target.value;
        spent = total - left;
    }
</script>

변수 spent과 left를 updateSpent()와 updateLeft() 함수에서 직접 갱신하도록 수정해 보았다. 불필요한 반응형 트리거를 없애고 더 직관적인 코드가 되었다.

$effect.pre()를 사용하면 상태 변경 전에 특정 작업을 수행할 수 있다.

<script lang="ts">
    $effect.pre(() => {
        // code...
    });
</script>

$effect.pre()

$effect.pre()는 Pre-Effect로, 일반적인 $effect보다 앞서 실행되는 반응형 효과를 정의하는 기능이다. 기존 값을 보존해야 하거나 선제적인 처리가 필요한 경우 유용하게 쓸 수 있다.

$effect와 $effect.pre()의 차이점

🏃‍♀️‍➡️🏃‍♂️‍➡️ 일반적인 $effect

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

    $effect(() => {
        console.log(`Count changed to: ${count}`);
    });

    function increment() {
        count++;
    }
</script>

이 경우 count가 변경된 이후에 $effect가 실행된다.

🏃‍♀️‍➡️🏃‍♂️‍➡️ $effect.pre()를 활용한 예시

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

    $effect.pre(() => {
        previousCount = count;  // count 변경 전에 기존 값 저장
    });

    $effect(() => {
        console.log(`Count changed from ${previousCount} to ${count}`);
    });

    function increment() {
        count++;
    }
</script>

이번에는 count가 변경되기 전에 previousCount를 저장하도록 $effect.pre()를 사용해 보았다. 변경 후 실행되는 $effect에서 이전 값과 새로운 값을 비교 가능하다.

🌿 Props

$props()

$props()를 사용해 기존 export let으로 가져오던 props를 한 번에 쉽게 가져올 수 있다.

🏃‍♀️‍➡️ Svelte4

<script>
    export let name = "";
    export let age = null;
    export let favouriteColors = [];
    export let isAvailable = false;
</script>

<p>My name is {name}!</p>
<p>My age is {age}!</p>
<p>My favourite colors are {favouriteColors.join(", ")}!</p>
<p>I am {isAvailable ? "available" : "not available"}</p>

🏃‍♂️‍➡️ Svelte5

<script lang="ts">
    const {
        name = '',
        age = null,
        favouriteColors = [],
        isAvailable = false,
    } = $props();
</script>

<p>My name is {name}!</p>
<p>My age is {age}!</p>
<p>My favourite colors are {favouriteColors.join(", ")}!</p>
<p>I am {isAvailable ? "available" : "not available"}</p>

기존 export let으로 하나하나 가져오던 props를 $props()를 사용하여 한 번에 가져올 수 있다.

$bindable()

$bindable()을 사용하여 데이터 양방향 바인딩을 할 수 있다.

🏃‍♀️‍➡️ Svelte4

<!-- Parent.svelte -->
<UserProfile bind:optionalProp={someValue} />

<!-- UserProfile.svelte -->
<script>
    export let optionalProp;
</script>
<input bind:value={optionalProp} />

기존에는 양방향 바인딩을 하기 위해서는 부모 컴포넌트에서 bind:를 붙이고 자식 컴포넌트에서 export let을 붙여야만 했다.

🏃‍♂️‍➡️ Svelte5

<script>
    const { optionalProp = $bindable() } = $props();
</script>

$bindable()을 사용하면 bind: 없이도 양방향 바인딩이 가능하다. optionalProp은 부모로부터 값을 받을 수 있고, 자식에서도 변경할 수 있다.

🌿 Debugging

$inspect

$inspect는 지정한 변수나 상태가 변경될 때마다 해당 값을 콘솔에 출력한다.

🏃‍♀️‍➡️ Svelte4

<script>
    let count = $state(0);
    let message = $state('hello');

    $: {
        console.log(count);
          console.log(message);
    }
</script>

<button onclick={() => count++}>Increment</button>
<input bind:value={message} />

🏃‍♂️‍➡️ Svelte5

<script>
    let count = $state(0);
    let message = $state('hello');

    $inspect(count, message); // count 또는 message가 변경될 때마다 콘솔에 출력
</script>

<button onclick={() => count++}>Increment</button>
<input bind:value={message} />

위 코드에서 count나 message가 변경될 때마다 $inspect가 자동으로 해당 값을 콘솔에 출력한다. 이는 개발 중에 상태 변화를 추적하는 데 유용하며, 프로덕션 빌드에서는 자동으로 제거되어 성능에 영향을 주지 않는다.

$inspect().with()

$inspect는 기본적으로 console.log를 사용하여 값을 출력하지만, .with() 메서드를 통해 커스텀 콜백 함수를 지정할 수 있다.

🏃‍♂️‍➡️ Svelte5

<script>
    let count = $state(0);

    $inspect(count).with((type, count) => {
        if (type === 'update') {
            console.trace('Count updated:', count); // 상태 변경 시 스택 트레이스 출력
        }
    });
</script>

<button onclick={() => count++}>Increment</button>

위 예시에서 count가 변경될 때마다 스택 트레이스를 포함한 커스텀 메시지가 콘솔에 출력된다. 이를 통해 상태 변경의 출처를 쉽게 추적할 수 있다.

$inspect.trace()

$inspect.trace()는 함수 내부에서 사용되어, 해당 함수가 실행될 때마다 어떤 반응형 상태의 변경으로 인해 실행되었는지를 콘솔에 출력한다.

🏃‍♂️‍➡️ Svelte5

<script>
    let count = $state(0);

    function increment() {
        $inspect.trace();
        count += 1;
    }
</script>

<button onclick={increment}>Increment</button>

increment 함수 내에 $inspect.trace()를 추가하면, count의 변경으로 인해 함수가 실행될 때마다 콘솔에 어떤 상태 변경이 함수 실행을 트리거했는지에 대한 정보가 출력된다.

🌿 Parent Access

$host()

부모 컴포넌트의 상태나 메서드에 접근할 때 $host()를 사용하여 더 직관적으로 데이터를 공유할 수 있다.

🏃‍♀️‍➡️ Svelte4

<!-- Parent.svelte -->
<script>
    import Child from './Child.svelte';

    let message = "Hello from Parent!";
</script>

<Child message={message} />

<!-- Child.svelte -->
<script>
    export let message;
</script>

<p>부모 메시지: {message}</p>

🏃‍♂️‍➡️ Svelte5

<!-- Parent.svelte -->
<script>
    import Child from './Child.svelte';

    let message = "Hello from Parent!";
</script>

<Child />

<!-- Child.svelte -->
<script>
    let { message } = $host; // 부모 컴포넌트의 message 가져오기
</script>

<p>부모 메시지: {message}</p>

Svelte 4 vs Svelte 5

즉, Svelte 5에서는 $host()를 통해 부모 상태 및 메서드 접근이 더 쉬워지고, Props 선언 없이도 데이터를 공유할 수 있다.

🌿 Slots

children과 @render children()

슬롯이 children이라는 prop으로 전달된다. @render children()을 사용해 이를 렌더링한다.

🏃‍♀️‍➡️ Svelte4

<button>
  <slot></slot> <!-- 슬롯을 여기에 삽입 -->
</button>

Svelte 4에서는 태그를 사용해서 슬롯 콘텐츠를 렌더링했다.

🏃‍♂️‍➡️ Svelte5

<script>
    let { children } = $props(); // 슬롯을 props로 가져옴
</script>

<button>
    {@render children()}  <!-- 슬롯 내용을 렌더링 -->
</button>

Svelte 5에서는 슬롯이 children이라는 prop으로 전달된다. 그리고 @render children()을 사용해 렌더링한다. 기존 방식보다 더 명확하고 함수형 컴포넌트 스타일에 가까운 구조다.

🌿 Snippets

@render snippetName()

#snippet은 Svelte 5에서 기존 slot을 대체하는 기능으로, 반복적으로 사용될 수 있는 UI 조각을 정의하는 역할을 한다. @render snippetName()을 사용하면 스니펫을 원하는 위치에서 쉽게 렌더링 가능하다.

🏃‍♀️‍➡️ Svelte4

{#each images as image}
    {#if image.href}
        <a href={image.href}>
            <img src={image.src} />
        </a>
    {:else}
        <img src={image.src} />
    {/if}
{/each}

이 코드에서는 images 배열을 순회하면서 각각의 image를 처리하고 있다. image.href가 존재하면 이미지를 a 태그 안에 넣고, 존재하지 않으면 그냥 img 태그만 렌더링된다. 이렇게 하면 중복되는 img 태그가 여러 번 반복된다.

🏃‍♂️‍➡️ Svelte5

{#snippet figure(image)}
    <img src={image.src} />
{/snippet}

{#each images as image}
    {#if image.href}
        <a href={image.href}>
            {@render figure(image)}
        </a>
    {:else}
        {@render figure(image)}
    {/if}
{/each}

figure(image)라는 스니펫을 정의하고, image.src를 사용해 img 태그를 렌더링하도록 했다. 이 스니펫을 사용하면, 반복적인 img 태그를 직접 작성할 필요 없이 @render figure(image)를 호출하여 재사용할 수 있다. 따라서 중복되는 img 태그를 스니펫으로 묶어 가독성이 좋아지고 유지보수가 쉬워진다!

특징

• 스니펫은 컴포넌트 내부 어디에서든 선언할 수 있다.
• 같은 lexical scope 내에서 접근 가능하다. 즉, 형제 요소(siblings)와 그 형제의 자식(children)에서도 접근할 수 있다.
• 스니펫은 컴포넌트의 props로 전달할 수 있다.
• 타입을 지정할 수 있다. 즉, TypeScript와 결합 가능!

🌿 Event Handlers

onclick

on:click이 아니라 HTML의 기본 onclick 속성을 그대로 사용한다.

🏃‍♀️‍➡️ Svelte4

<script>
    let count = 0;

    function handleClick() {
        count++;
    }
</script>

<button on:click={handleClick}>
    clicks: {count}
</button>

기존에는 on ":" click을 사용했다.

🏃‍♂️‍➡️ Svelte5

<script>
    let count = $state(0);

    function onclick() {
        count++;
    }
</script>

<button {onclick}>
    clicks: {count}
</button>

Svelte 5에서는 on:click이 아니라 HTML의 기본 onclick 속성을 그대로 사용한다. 또한 이벤트 핸들러를 함수로 분리한 뒤 {}를 사용해 속성으로 바로 전달이 가능하다.

🌿 Fine-grained reactivity

"세밀한 반응성을 제공한다." 불필요한 렌더링을 최소화하면서 필요한 부분만 업데이트하는 방식으로 성능을 최적화한다.

Svelte 4 vs Svelte 5

🏃‍♀️‍➡️ Svelte4

<script>
    let todos = [];

    function remaining(todos) {
        console.log('recalculating');
        return todos.filter((todo) => !todo.done).length;
    }

    function addTodo(event) {
        if (event.key !== 'Enter') return;

        todos = [
            ...todos,
            {
                done: false,
                text: event.target.value
            }
        ];

        event.target.value = '';
    }
</script>

Svelte 4의 코드를 살펴보자. remaining() 함수는 todos가 변경될 때마다 실행된다. todos 배열이 새로운 값으로 할당되면서 컴포넌트 전체가 다시 렌더링될 가능성이 높다. 할 일 목록에서 특정 항목만 변경되더라도 전체 todos 배열을 다시 검사해야 되기 때문에 성능 저하가 발생한다.

🏃‍♂️‍➡️ Svelte5

<script>
    let todos = $state([]);

    let remaining = $derived(() => {
        console.log('recalculating');
        return todos.filter((todo) => !todo.done).length;
    });

    function addTodo(event) {
        if (event.key !== 'Enter') return;

        todos = [
            ...todos,
            {
                done: false,
                text: event.target.value
            }
        ];

        event.target.value = '';
    }
</script>

todos를 $state([])로 변경하여 배열 전체가 아닌 개별 항목이 변경될 때만 반응형 업데이트가 발생한다. 또한 remaining을 $derived()로 변경하여, todos가 변경될 때마다 remaining이 전체를 다시 계산하지 않고 필요한 부분만 업데이트 한다. 전체 렌더링이 아닌 최소한의 업데이트만 수행하는 방식으로 성능이 개선된 것이다.

💡 마치며

지금까지 Svelte 5가 되면서 Svelte 4와 달라진 점들에 대해 살펴보았다. 여러 변화들이 있지만 이전보다 세밀하게 상태 관리를 할 수 있다는 것이 장점이지 않을까 싶다. 애증의 스벨트.. 기는 하지만 파면 팔수록 재미있는 건 사실이다. 앞으로도 화이팅해보자고. 😎

일반적으로 Svelte는 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되는 단방향 데이터 흐름을 가진다. 단방향 데이터 흐름으로 인해 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터가 업데이트될 때 자식 컴포넌트는 영향을 받아 반응형 동작을 하게 되지만, 반대로 자식 컴포넌트에서 부모 컴포넌트로 전달받은 데이터가 업데이트될 때 부모 컴포넌트는 영향을 받지 않는다.

이런 규칙을 깨고 자식 컴포넌트에서 부모 컴포넌트로 전달받은 데이터가 업데이트될 때 부모 컴포넌트가 반응형 동작을 할 수 있게 하는 양방향 데이터 흐름을 가질 수 있도록 하는 것이 데이터 바인딩이다. 🙂

🥨 데이터 바인딩

🧀 Input 태그

type="text"

<script>
    let name = 'world';
</script>

<input bind:value={name}>
<h1>Hello {name}!</h1>

완성 화면

이처럼 input에 입력된 값이 변경될 때마다 자동으로 name의 값 또한 변경되는 것을 볼 수 있다.

type="number", type="range"

<script>
    let a = 1;
    let b = 2;
</script>

<label>
    <input type="number" bind:value={a} min="0" max="10">
    <input type="range" bind:value={a} min="0" max="10">
</label>

<label>
    <input type="number" bind:value={b} min="0" max="10">
    <input type="range" bind:value={b} min="0" max="10">
</label>

<p> {a} + {b} = {a+b}</p>

완성 화면

input 태그의 type 속성이 number 혹은 range일 경우 바인딩되는 값은 자동으로 Number 타입이 된다.

type="checkbox"

<script>
    let yes = false;
</script>

<label>
    <input type="checkbox" bind:checked={yes}>
    CheckBox
</label>

완성 화면

type 속성이 checkbox인 경우, bind:checked를 사용해서 checked 속성을 바인딩해야 한다.

type="radio"

<script>
    let picked = null;
</script>

<label>
    <input type="radio" value="One" bind:group={picked}>
    One
</label>
<label>
    <input type="radio" value="Two" bind:group={picked}>
    Two
</label>
<br>
<span>선택: {picked}</span>

완성 화면

radio의 경우 여러 개의 input 태그들이 동일한 데이터에 바인딩되어야 한다. 이때는 bind:group을 사용한다. value 속성에서는 각각 input 태그들이 선택되었을 때 지정되어야 하는 데이터를 지정한다. bind:group은 type이 radio에서뿐만 아니라 동일한 데이터를 바인딩해야 할 경우에도 사용 가능하다.

🧀 Textarea 태그

<script>
    let value = 'Some Text';
</script>

<style>
    textarea { width: 100%; height: 200px;}
</style>

<!-- <textarea bind:value={value}></textarea> -->
<textarea bind:value></textarea> // 약어 사용 가능

🧀 Select 태그

<script>
    const list = [
        {id: 1, text: 'A'},
        {id: 2, text: 'B'},
        {id: 3, text: 'C'}
    ]
    let selected;
</script>

<select bind:value={selected}>
    {#each list as item (item.id)}
        <option value={item}>{item.text}</option>
    {/each}
</select>
<span>선택함: {selected? selected.id : '기다리는 중...'}</span>

완성 화면

bind:value로 데이터 바인딩되는 값의 타입은 Object, String 등 모든 타입이 가능하다. 바인딩 데이터의 초기값이 정의되어 있지 않다면 리스트이 첫 번째 값이 기본값으로 저장된다.

multiple 속성

<script>
    const list = [
        {id: 1, text: 'A'},
        {id: 2, text: 'B'},
        {id: 3, text: 'C'}
    ];
    let selected = [];
</script>

<select multiple bind:value={selected}>
    {#each list as item (item.id)}
        <option value={item}>{item.text}</option>
    {/each}
</select>
<span>선택함: {selected? selected.map(x => x.id).join(',') : '기다리는 중...'}</span>

완성 화면

🧀 contenteditable 속성

<script>
    let html = '<p>텍스트를 입력해 주세요.</p>'
</script>

<div
    contenteditable="true"
    bind:innerHTML={html}
></div>

<div
    contenteditable="true"
    bind:innerHTML={html}
></div>

<pre>{html}</pre>

<style>
    [contenteditable] {
        padding: 0.5em;
        border: 1px solid #eee;
        border-radius: 4px;
    }
</style>

완성 화면

contenteditable를 true로 설정하면 textContent와 innerHTML 속성을 바인딩하여 사용할 수 있다.

🧀 Each 블록 바인딩

<script>
    import { each } from "svelte/internal";

    let todos = [
        {done: false, text: '독서하기'},
        {done: false, text: 'Svelte 공부하기'},
        {done: false, text: '일기 쓰기'}
    ]
</script>

{#each todos as todo, index (index)}
    <label class:done={todo.done}>
        <input
            type="checkbox"
            bind:checked={todo.done}>
            {todo.text}
    </label>
{/each}

완성 화면

🧀 This 바인딩

DOM 요소를 가져오고 싶거나 컴포넌트 인스턴스를 가져올 때 사용하는 것이 This 바인딩이다.

HTML 태그에서 This 바인딩

<script>
    let value;
    let input;
</script>

<input bind:value bind:this={input}>
<button on:click={() => input.focus()}>focus</button>

완성 화면

버튼을 클릭하면 input 태그가 포커스되고, bind:this={input}와 같이 작성하면 input 변수에 input 태그가 바인딩된다. 이벤트 핸들러 등의 다른 함수에서 바인딩된 DOM 요소를 접근해서 사용할 수 있다.

컴포넌트에서 This 바인딩

Inner.svelte

<!-- src/Inner.svelte -->
<script>
    let value, input;
</script>

<input bind:value bind:this={input}>

App.svelte

<script>
    import Inner from "./Inner.svelte";
    let inner;
</script>

<Inner bind:this={inner} />
<button on:click={() => inner.$capture_state().input.focus()}>Focus</button>

This를 바인딩하여 컴포넌트 인스턴스를 가져온 경우, 바인딩된 컴포넌트 인스턴스의 $capture_state()를 호출하면 해당 컴포넌트의 데이터(State) 값을 가져올 수 있다.

🧀 컴포넌트 Props 바인딩

HTML 속성을 바인딩한 것처럼 bind:Props를 사용하여 컴포넌트의 Props를 바인딩할 수도 있다.

Inner.svelte

<!-- src/Inner.svelte -->
<script>
    export let value;
</script>

<input bind:value>

App.svelte

<script>
    import Inner from "./Inner.svelte";
    let value;
    function handleClick() {
        alert(value);
    }
</script>

<Inner bind:value />
<button on:click={handleClick}>출력</button>

Inner 컴포넌트는 value라는 Props를 전달받고, App 컴포넌트는 bind:value로 value라는 Props를 바인딩했다. 이렇게 컴포넌트의 Props를 바인딩하면 Inner 컴포넌트에서도 App 컴포넌트의 value 값을 업데이트할 수 있는 양방향 데이터 흐름을 가지게 된다.

이번 포스팅에서는 Svelte에서 이벤트를 처리하는 방법에 대해 정리해 보았다. 특히 dispatch를 눈여겨 보자!

🧚‍♂️ 이벤트 처리

💫 이벤트 수식어

스벨트는 DOM 이벤트를 처리할 때 이벤트 수식어 기능을 제공한다.

<script>
    function handleClick() {
        alert('no more alert');
    }
</script>

<button on:click|once={handleClick}>Click me!</button>

위는 once 이벤트 수식어를 사용한 코드이다. once 이벤트 수식어는 이벤트가 발생했을 때 이벤트 핸들러를 단 한 번만 호출한다.

종류

preventDefault

태그의 기본 동작을 막는 이벤트 수식어

stopPropagation

이벤트가 다음 요소로 흐르는 것을 막는 이벤트 수식어

passive

터치 혹은 휠 이벤트로 발생하는 스크롤의 성능을 향상시키는 이벤트 수식어 -> 스벨트는 안전한 곳에 자동으로 추가한다!

nonpassive

passive: false를 지정해 주는 수식어

capture

캡처 방식으로 이벤트 핸들러를 실행함

once

이벤트 핸들러를 단 한번만 실행하도록 하는 이벤트 수식어

self

event.target과 이벤트 핸들러를 정의한 요소가 같을 때 이벤트 핸들러를 실행하도록 하는 이벤트 수식어

on:click|once|capture={...}

위 코드처럼 체인으로 연결해 수식어 여러 개를 사용할 수도 있다.

💫 컴포넌트 이벤트

컴포넌트에서 이벤트를 발생시켜 상위 컴포넌트로 데이터를 전달할 수 있다.

createEventDispatcher 함수

dispatch: ((name: string, detail?: any) => void) = createEventDispatcher();

createEventDispatcher 함수는 이벤트를 발생시키는 dispatch 함수를 반환한다. dispatch 함수는 name과 detail 두 개의 파라미터를 전달받는다.

name

이벤트 이름

detail

이벤트 객체의 detail 필드에 담을 데이터

여기서 주의할 점은 createEventDispatcher()는 컴포넌트가 처음 생성될 때 호출되어야 한다. 함수 안에서 createEventDispatcher()를 호출하여 dispatch를 사용하면 이벤트 전달이 되지 않는다. 아래에서 코드와 함께 dispatch 사용법을 연습해 보자!

Inner.svelte

<!-- src/Inner.svelte -->
<script>
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    function sayHello() {
        dispatch('message', {
            text: '안녕!'
        })
    }
</script>

<button on:click={sayHello}>인사하기</button>

App.svelte

<script>
    import Inner from "./Inner.svelte";

    function handleMessage(event) {
        debugger;
        alert(event.detail.text);
    }
</script>

<Inner on:message={handleMessage} />

디버깅을 해 보면 event.detail에 하위 컴포넌트에서 전달한 text라는 데이터를 확인할 수 있다. 이처럼 하위에서 상위로 데이터를 보낼 일이 있을 때 사용하면 아주 편리하다. 😎

CustomEvent

CreateEventDispatcher로 생성된 컴포넌트 이벤트는 CustomEvent를 말한다. 개발자가 직접 정의하여 사용할 수 있는 이벤트다.

💫 이벤트 포워딩

DOM 이벤트와 달리 컴포넌트 이벤트는 버블링되지 않는다. 자동으로 상위 요소로 이벤트가 전달되지 않기 때문에 의도적으로 부모 컴포넌트로 이벤트를 전달해야 한다.

Inner.svelte

<!-- src/Inner.svelte -->
<script>
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    function sayHello() {
        dispatch('message', {
            text: '안녕!'
        })
    }
</script>

<button on:click={sayHello}>인사하기</button>

Outer.svelte

<!-- src/Outer.svelte -->
<script>
    import Inner from "./Inner.svelte";
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    function forward(event) {
        dispatch('message', event.detail);
    }
</script>

<Inner on:message={forward}/>

App.svelte

<script>
    import Outer from "./Outer.svelte";

    function handleMessage(event) {
        alert(event.detail.text);
    }
</script>

<Outer on:message={handleMessage} />

완성 화면

스벨트에서는 약어를 제공하기 때문에 Outer.svelte의 코드를 좀 더 간결하게 작성할 수도 있다.

Outer.svelte

<!-- src/Outer.svelte -->
<script>
    import Inner from "./Inner.svelte";
</script>

<Inner on:message/>

이번 포스팅에서는 스벨트에서 사용하는 논리 블록에 대해 알아보자! 😀

🎵 논리 블록

🔮 조건문 블록

스벨트는 조건에 따라 DOM을 화면에 나타낼지 나타내지 않을지 선택할 수 있는 조건문 블록을 제공한다. js와 동일하게 If, Else, Else-if 블록이 있다.

If 블록

<script>
    let user = {loggedIn: false};

    function toggle() {
        user.loggedIn = !user.loggedIn;
    }
</script>

{#if user.loggedIn}
    <button on:click={toggle}>
        Log out
    </button>
{/if}

{#if !user.loggedIn}
    <button on:click={toggle}>
        Log in
    </button>
{/if}

Else 블록

Else 블록을 사용하여 좀 더 간단히 작성해 보자.

<script>
    let user = {loggedIn: false};

    function toggle() {
        user.loggedIn = !user.loggedIn;
    }
</script>

{#if user.loggedIn}
    <button on:click={toggle}>
        Log out
    </button>
{:else}
    <button on:click={toggle}>
        Log in
    </button>
{/if}

Else-if 블록

<script>
    let x = 7;
</script>

{#if x > 10}
    <p>{x} is greater than 10</p>
{:else if 5 > x}
    <p>{x} is less than 5</p>
{:else}
    <p>{x} is between 5 and 10</p>
{/if}

🔮 반복문 블록

Each 블록

배열

<script>
    const arr = ['H', 'e', 'l', 'l', 'o'];
</script>

<ul>
    {#each arr as item}
        <li>{item}</li>
    {/each}
</ul>

유사 배열

<script>
    const arrLike = {
        0: 'H',
        1: 'e',
        2: 'l',
        3: 'l',
        4: 'o',
        length: 5
    };
</script>

<ul>
    {#each arrLike as item}
        <li>{item}</li>
    {/each}
</ul>

iterable 객체

반복 가능한 객체는 아래와 같이 Each 블록을 사용할 수 있다.

• iterator value와 done이라는 두 개의 속성을 가진 객체를 반환하는 next 함수를 포함한 객체

• iterable 이터레이터를 반환하는 [Symbol.Iterator] 함수를 가진 객체

<script>
    const iterable = {
        [Symbol.iterator]: function*() {
            yield 'H';
            yield 'e';
            yield 'l';
            yield 'l';
            yield 'o';
        }
    };
</script>

<ul>
    {#each [...iterable] as item}
        <li>{item}</li>
    {/each}
</ul>

Else 블록

Each 블록의 배열이 비어 있을 경우, 예외 처리 표현을 위해 Else 블록을 사용할 수 있다.

<script>
    let arr = [];
    setTimeout(()=>{
        arr = ['H', 'e', 'l', 'l', 'o'];
    }, 1000)
</script>

<ul>
    {#each arr as item}
        <li>{item}</li>
    {:else}
        <li>빈 배열입니다.</li>
    {/each}
</ul>

index 사용

Each 블록의 두 번째 파라미터로 현재의 index를 알 수 있다.

<script>
    const arr = ['H', 'e', 'l', 'l', 'o'];
</script>

<ul>
    {#each arr as item, i}
        <li>{i+1}: {item}</li>
    {/each}
</ul>

구조 분해 사용

<script>
    const arr = [
        {id: 1, value: 'H'},
        {id: 2, value: 'e'},
        {id: 3, value: 'l'},
        {id: 4, value: 'l'},
        {id: 5, value: 'o'}
    ];
</script>

<ul>
    {#each arr as {id, value}}
        <li>{id}: {value}</li>
    {/each}
</ul>

Key 지정

Key는 Each 블록의 업데이트를 최적화하기 위해 사용된다. Key를 지정하면 업데이트되었을 때, 업데이트된 위치를 정확히 인지해 해당 DOM만 업데이트할 수 있다.

<script>
    let arr = [
        {id: 1, value: 'H'},
        {id: 2, value: 'e'},
        {id: 3, value: 'l'},
        {id: 4, value: 'l'},
        {id: 5, value: 'o'}
    ];
</script>

<ul>
    {#each arr as item}
        <li>{item.id}: {item.value}</li>
    {/each}
</ul>

<button on:click={() => {arr = arr.slice(1)}}>
    첫 번째 아이템 제거
</button>

위와 같이 작성했을 경우, 첫 번째 아이템이 제거되면 위에서부터 순차적으로 업데이트가 되고 마지막 아이템이 삭제되어 총 5번의 업데이트가 발생한다.

<script>
    let arr = [
        {id: 1, value: 'H'},
        {id: 2, value: 'e'},
        {id: 3, value: 'l'},
        {id: 4, value: 'l'},
        {id: 5, value: 'o'}
    ];
</script>

<ul>
    {#each arr as item (item.id)}
        <li>{item.id}: {item.value}</li>
    {/each}
</ul>

<button on:click={() => {arr = arr.slice(1)}}>
    첫 번째 아이템 제거
</button>

두 번째 코드처럼 Key를 지정하면 실제로 변경된 아이템만 업데이트되어 최적화된다. Key를 지정하는 방법은 {#each arr as item (item.id)}와 같이 소괄호({...}) 안에 Key를 지정하면 된다.

스벨트는 내부적으로 Map 객체를 사용하기 때문에 Key에 숫자나 문자열뿐만 아니라 객체를 사용할 수도 있다. 즉, (item.id) 대신 (item)으로 변경할 수도 있다!

🔮 비동기 블록

Await 블록

<script>
    let promise = getRandomNumber();

    function getRandomNumber() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(Math.random());
            }, 2000);
        });
    }

    function handleClick() {
        promise = getRandomNumber();
    }
</script>

{#await promise}
    <p>기다리는 중...</p>
{:then number} 
    <p>생성된 숫자는 {number}입니다.</p>
{:catch error}
    <p style="color: red">{error}</p>
{/await}

<button on:click={handleClick}>생성하기</button>

{#await promise}...{:then number}

비동기 작업이 응답하기 전 화면에 노출되는 블록이다. 스켈레톤 UI를 사용하기 적당한 블록이다.

{:then number}...{:catch error}

비동기 작업이 응답하여 응답된 결과가 화면에 노출되는 블록이다. number는 Promise의 resolve 함수에 전달된 파라미터 값이다. Async 함수의 경우에는 반환값이다.

{:catch error}...{/await}

비동기 작업에서 에러가 발생할 때 화면에 노출되는 블록이다. error는 Promise의 reject 함수에 전달된 파라미터 값이다. Async 함수의 경우에는 throw로 반환된 값이다.

간략한 Await 블록

{#await promise then number}
    <p>생성된 숫자는 {number}입니다.</p>
{/await}

비동기 작업에서 에러가 발생하지 않을 것을 확신할 수 있다면 Catch 블록을 생략할 수 있다.

🔮 Key 블록

Key 블록을 사용하면 블록에 사용한 표현식이 업데이트되면서 Key 블록의 내용들이 제거된 후 다시 추가된다.

<script>
    import KeyComp from './KeyComp.svelte';
    let value = 0;
</script>

{#key value}
    <KeyComp {value} />
{/key}
<button on:click={() => value++}>Add Value</button>

완성 화면

개발자 도구로 살펴보면 첫 렌더링 시 컴포넌트가 생성되어 create 로그가 출력된 것을 볼 수 있다. Key 블록의 조건이 업데이트될 때마다 컴포넌트가 제거된 후 다시 생성된다. 때문에 Add Value 버튼이 클릭된 횟수만큼 로그가 출력된다.

이번 포스팅에서는 Props에 대해 알아보려고 한다.

🧚‍♀️ Props

🧙‍♂️ 개념

부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터들을 Properties(이하 Props)라고 한다.

앞선 포스팅에서 속성(Attribute)에 대해 살펴보았다. 속성과 Props의 개념은 동일하다. 다만 HTML 태그에서 사용하면 속성, 컴포넌트에서 사용하면 Props라고 한다. 용어 차이만 있을 뿐!

<script>
    import Component from './Component.svelte';
</script>

<div class="this-is-attribute"></div> <!-- class는 속성이다. -->
<Component text="this-is-property" /> <!-- text는 Props이다. -->

🧙‍♂️ 특징

단방향 데이터 흐름

(출처 - Joy of Code)

Props는 기본적으로 단방향 데이터 흐름으로 이루어진다. 단방향 데이터 흐름은 부모에서 자식 컴포넌트로 데이터가 전달되는 것을 말한다. 반대로 자식에서 부모 컴포넌트로 데이터를 전달하기 위해서는 이벤트를 통해야 한다.

자식 컴포넌트에서 Props의 값을 변경하더라도 부모 컴포넌트에서는 Props로 전달한 값은 업데이트되지 않는다. 단방향 데이터 흐름은 데이터 흐름을 단순하게 만들고, 흐름이 이해하기 쉽기 때문에 개발과 유지보수가 편리하다.

만약 Props를 양방향 데이터 흐름으로 사용하려면 데이터 바인딩을 하면 되는데, 이는 나중에 다시 알아보도록 하자. 🤔

🧙‍♂️ Props 정의

App.svelte

<script>
    import Child from './Child.svelte';
</script>

<Child text="hello, world!"/>

Child.svelte

<!-- src/Child.svelte -->
<script>
    export let text;
</script>

<p>{text}</p>

완성 화면

위처럼 export를 사용하여 Props를 전달받을 수 있다.

🧙‍♂️ 기본값 설정

Child.svelte

<!-- src/Child.svelte -->
<script>
    export let text = '전달받은 값이 없습니다.';
</script>

<p>{text}</p>

자식 컴포넌트에 Props 값이 전달되지 않았을 경우를 대비하여 Props의 기본값을 설정할 수 있다.

🧙‍♂️ 전개 연산자 사용

전개 연산자(Spread Operator)는 많은 양의 Props를 자식 컴포넌트에 전달해야 할 때 코드 양을 줄이는 역할을 한다.

Info.svelte

<!-- src/Info.svelte -->
<script>
    export let name;
    export let version;
    export let speed;
    export let website;
</script>

<p>
    The <code>{name}</code> package is {speed} fast.
    Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
    and <a href={website}>learn more here</a>
</p>

App.svelte

<script>
    import Info from './Info.svelte';
    const pkg = {
        name: 'svelte',
        version: 3,
        speed: 'blazing',
        website: 'https://svelte.dev'
    };
</script>

<Info 
    name={pkg.name}
    version={pkg.version}
    speed={pkg.speed}
    website={pkg.website}
/>

완성 화면

코드가 너무 길다.... 전개 연산자를 사용하면 아래와 같이 코드 양을 줄일 수 있다.

App.svelte

<script>
    import Info from './Info.svelte';
    const pkg = {
        name: 'svelte',
        version: 3,
        speed: 'blazing',
        website: 'https://svelte.dev'
    };
</script>

<Info {...pkg}/>

아주 코드가 간단해졌다. 😎

🧙‍♂️ $$ props와 $$ restProps

스벨트는 Props를 전달받은 컴포넌트에서 export로 Props를 선언하지 않아도 Props를 사용할 수 있는 방법을 제공한다. 최적화하기 어렵기 때문에 이 방법은 추천하지 않지만, 어떤 Props가 컴포넌트로 전달될지 모르는 경우에는 유용하게 사용 가능하다.

$$props

Info.svelte

<!-- src/Info.svelte -->
<p>
    The <code>{$$props.name}</code> package is {$$props.speed} fast.
    Download version {$$props.version} from <a href="https://www.npmjs.com/package/{$$props.name}">npm</a>
    and <a href={$$props.website}>learn more here</a>
</p>

$$props 변수는 컴포넌트로 전달된 모든 Props를 담고 있다.

$$restProps

Info.svelte

<!-- src/Info.svelte -->
<script>
    export let name;
    export let version;
</script>

<p>
    The <code>{name}</code> package is {$$restProps.speed} fast.
    Download version {version} from <a href="https://www.npmjs.com/package/{$$restProps.name}">npm</a>
    and <a href={$$restProps.website}>learn more here</a>
</p>

$$restProps 변수는 export로 정의되지 않은 Props만 담고 있다. name과 version Props는 export로 선언되었기 때문에 $$restProps.name과 $$restProps.version의 값은 undefined다.

🧙‍♂️ --style-props

사용자 지정 CSS 속성을 컴포넌트 Props로 전달할 수 있다. ---style-props는 문법적 설탕(Syntactic sugar)이다.

global.css

<!-- public/global.css -->
html {
  ---theme-color: black;
}

StyleProps.svelte

<!-- src/StyleProps.svelte -->
<div>테마 적용</div>

<style>
    div {
        color: var(--theme-color);
    }
</style>

App.svelte

<!-- src/App.svelte -->
<script>
  import StyleProps from './StyleProps.svelte';
</script>

<StyleProps --theme-color="red" />
<StyleProps />

"--theme-color='red'"를 전달하고 나머지 하나에는 아무것도 전달하지 않았다. --theme-color를 전달한 StyleProps 컴포넌트의 글씨는 빨간색, 전달하지 않은 StyleProps는 검은색으로 나타난다.

이번 포스팅에서는 스벨트에서 사용하는 반응형 문법에 대해 알아보자. 특히 스벨트의 $ 문법을 눈여겨 보자!

💬 반응형 문법

👏 데이터 할당

반응형 동작

사용자 행동(클릭 등) 또는 데이터 변화에 따라 자동으로 데이터 혹은 화면이 업데이트되는 것

<script>
    let count = 0;
    setInterval(() => count += 1, 1000);
</script>

<p>count: {count}</p>

완성 화면

count 값이 업데이트되면 반응형 동작으로 화면이 업데이트된다. 데이터가 할당되면 반응형 동작을 하게 되는데, 데이터가 할당되는 대표적인 경우는 이벤트가 발생하여 이벤트 핸들러에서 데이터를 업데이트하는 경우다.

이벤트 리스너

{button on=이벤트 이름="{이벤트 핸들러}">Click</button>

이벤트 리스너는 HTML 태그에 이벤트가 발생하는지 감시하고 있다가 이벤트가 발생했을 때 이벤트 핸들러를 호출한다. 이벤트 이름에는 click, change, mousedown 등이 온다.

### 이벤트 핸들러

```js
<script>
    let count = 0;
    function handleClick(event) {
        count += 1;
    }
</script>

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

이벤트 인라인 핸들러

<script>
    let count = 0;
</script>

<button on:click={(event) => count += 1}>{count}</button>

일부 프레임워크에서는 성능상의 이유로 인라인 이벤트 핸들러 사용을 지양하고 있다. 그러나 스벨트는 컴파일되면서 최적화되기 때문에 인라인 핸들러를 성능 고민 없이 사용할 수 있다.

👏 데이터 할당 시 주의사항

스벨트의 반응형은 데이터가 할당되었을 때 동작한다. Number, String 타입 등의 기본형 변수가 아닌 Array, Object 타입의 참조형 변수는 데이터 할당 없이 참조된 데이터 업데이트가 가능하다.

    const arr = [];
    arr.push('Hello World!');
    arr[0] = 'helloWorld';

    const obj = { foo: 'bar' };
    obj.foor = 'baz';

참조형 변수의 값을 데이터 할당 없이 업데이트할 수 있더라도, 참조형 변수 역시 데이터 할당이 되어야 반응형 동작을 하게 된다.

배열 데이터 할당

배열의 push, splice 등의 메서드를 사용하여 배열의 참조 값을 업데이트한 경우에는 자동으로 화면을 업데이트하지 않는다. 아래와 같이 할당이 되어야 반응형으로 동작한다.

<script>
    let numbers = [];

    function addNumber(){
        // numbers.push(numbers.length + 1);
        // numbers = numbers;
        numbers = [...numbers, numbers.length + 1];
    };
</script>

<p>{numbers}</p>
<button on:click={addNumber}>추가</button>

객체 데이터 할당

객체 데이터를 할당할 때 할당되는 변수가 할당 식의 가장 왼쪽에 나타나야 한다. 다음 코드와 같이 할당할 경우 반응형 동작을 하지 않는다.

<script>
    let obj = {
        foo: {
            bar: 'bar'
        }
    };

    function handleClick() {
        const foo = obj.foo;
        foo.bar = 'baz'; // 반응형으로 동작하지 않음.
    }
</script>

<p>{obj.foo.bar}</p>
<button on:click={handleClick}>변경</button>

다음과 같이 수정해야 반응형으로 동작한다.

<script>
    let obj = {
        foo: {
            bar: 'bar'
        }
    };

    function handleClick() {
        obj.foo.bar = 'baz';
    };
</script>

<p>{obj.foo.bar}</p>
<button on:click={handleClick}>변경</button>

👏 $ 문법

$ 문법은 특정 데이터를 감시한다. $ 문법을 사용하면 특정 데이터가 업데이트되었을 때 필요한 동작을 수행하는 코드를 작성할 수 있다. $ 문법을 사용하는 방식에 따라 반응형 선언, 반응형 실행으로 구분할 수 있다.

반응형 선언

데이터가 업데이트되었을 때 자동으로 값을 선언하는 방법

<script>
    let count = 0;

    $: doubled = count + 2; // count 업데이트 시 재계산 된다.
</script>

<button on:click={(event) => count += 1}>count: {count}</button>
<p>doubled: {doubled}</p>

완성 화면

count 값이 업데이트되면 $: 블록이 반응형으로 실행되어 doubled 값을 업데이트한다. 이처럼 let doubled와 같은 변수 선언이 필요하지 않다.

반응형 실행

<script>
    let count = 0;
    $: console.log(`count: ${count}`);
</script>

<button on:click={(event) => count += 1}>count: {count}</button>

완성 화면

count 값이 업데이트될 때마다 값을 console.log로 출력한다.

<script>
    let count = 0;
    $: {
        console.log(`count: ${count}`);
        if(count >= 10){
            alert('count가 10보다 큽니다.');
        }
    } 
</script>

<button on:click={(event) => count += 1}>count: {count}</button>

완성 화면

이렇게 블록으로 작성도 가능하다.

<script>
    let count = 0;
    let isEnter = false;
    $: {
        // count 또는 isEnter 값이 변경될 때 실행된다.
        console.log(`count: ${count}, isEnter: ${isEnter}`);
    } 
</script>

<p>isEnter: {isEnter}</p>
<button
    on:click={(e) => count += 1}
    on:mouseenter={() => isEnter = true}
    on:mouseleave={() => isEnter = false}
>
    count: {count}
</button>

$: 블록에서 두 개 이상의 변수를 사용한다면 두 개의 변수를 모두 감시한다. count 또는 isEnter 값이 변경될 경우 $: 블록이 실행된다.

👏 $ 문법 사용 시 주의사항

첫 렌더링 시 실행

$: 블록은 첫 렌더링 시에도 실행된다.

최상위 레벨에서 선언

$ 문법은 최상위 레벨에서 선언되어야 한다. 함수 안이나 블록문 안에서 사용되면 데이터를 감시할 수 없다.

<script>
    let count = 0;
    {
        // 블록 안에서 사용한 $는 데이터를 감시하지 못함
        $: console.log(`count: ${count}`)
    }
    function init() {
        // 함수 안에서 사용한 $는 데이터를 감시하지 못함
        $: console.log(`count: ${count}`)
    }
    init();
</script>

<button on:click={(e) => count += 1}>count: {count}</button>

감시 데이터 최적화

$ 문법은 $: 블록에서 사용된 데이터를 감시한다. 사용되네이터를 모두 감시하기 때문에 사용된 데이터 중 하나라도 업데이트되면 $: 블록이 실행된다. 하나의 $: 블록이 많은 양의 데이터를 감시하게 되면, 데이터가 업데이트되었을 때마다 불필요한 코드가 실행될 수 있어 성능 저하가 발생하게 된다. 감시하는 데이터를 분리할 수 있다면 여러 개의 $: 블록으로 분리하여 필요한 코드만 동작하게 하는 것이 좋다.

감시 데이터 명시

$: 블록에서 직접 사용되는 값들만 감시하여 반응형으로 동작한다.

<script>
    let x = 0;
    let y = 0;

    function yPlusAValue(value) {
        return value + y;
    }

    $: total = yPlusAValue(x);
</script>

total: {total}
<button on:click={() => x++}>
    Increment X
</button>

<button on:click={() => y++}>
    Increment Y
</button>

$: 블록에서 yPlusAValue 함수의 파라미터로 x 값을 전달해 주면 x와 y의 값이 합쳐져 total 값이 업데이트된다. x나 y 값이 변경되면 $: 블록이 실행되어 total 값을 업데이트해야 할 것 같지만, 실제로는 $: 블록에 직접 사용된 값은 x뿐이기 때문에 x 값이 업데이트될 때만 반응형으로 동작한다.

이번 포스팅에서는 스벨트의 기초 문법에 대해 정리해 보려고 한다.

📚 기초 문법

📖 데이터 정의

<script>
    let name = 'world';
</script>

<h1>Hello, {name.toUpperCase()}!</h1>

스벨트에서 데이터를 정의하는 방법은 위와 같다. 평범한 js 변수를 선언하듯이 변수를 선언해 주고, HTML 태그에서 중괄호({...}) 안에 변수를 사용하면 된다. 이렇게 만들어진 변수는 값이 변경되면 화면도 자동으로 업데이트된다. 또한 중괄호 안에서 js 문법을 사용할 수도 있다.

📖 속성 정의

속성 약어

<script>
    let src = 'https://bemoy.github.io/assets/img/logo.png';
    let name = 'Beomy';
</script>

<img {src} alt="{name}">

스벨트에서는 코드 양을 좀 더 줄일 수 있도록 속성 약어 기능을 제공한다. HTML 태그의 속성 이름과 속성에 할당된 변수 이름이 동일할 때 속성 약어로 작성할 수 있다. 위와 같이 img 태그의 속성 이름과 변수 이름이 src로 동일하기 때문에 속성 약어 사용이 가능하다.

클래스 속성 약어

<button>
    class:active
    on:click={() => active = true}
</button>

HTML 태그에 정의할 클래스 이름과 변수 이름이 동일할 경우 약어로 작성할 수 있다. 클래스 약어를 사용하면 코드를 좀 더 직관적으로 작성할 수 있다.

📖 컴포넌트 정의

레고 블록들을 조합해서 하나의 완성품을 만들어내는 것처럼 스벨트에서는 컴포넌트를 조합해서 프로젝트를 완성해야 한다.

Child.svelte

<!-- src/Child.svelte -->
 <p>Child 컴포넌트입니다.</p>

App.svelte

<script>
    import Child from './Child.svelte';
</script>

 <p>App 컴포넌트입니다.</p>
 <Child />

완성 화면

이렇게 필요한 컴포넌트를 import 해서 블록처럼 조립한다. 컴포넌트를 사용하면 한 파일에 작성해야 할 코드를 여러 파일로 나눠서 작성할 수 있다. 목적에 맞게 컴포넌트 파일을 나눠 작성하면 가독성이 좋아지고 유지보수를 쉽게 만들 수 있다.

📖 스타일 정의

스타일은 스타일 태그와 인라인 스타일 속성 모두 사용 가능하다. 스벨트는 컴포넌트를 조립하는 방식으로 구성되기 때문에 각 컴포넌트마다 원하는 스타일을 다르게 적용할 수 있다.

First.svelte

<!-- src/First.svelte -->
 <p>큰 글씨</p>

 <style>
    p {
        font-size: 30px;
    }
 </style>

Second.svelte

<!-- src/First.svelte -->
<p>빨간 글씨</p>

<style>
   p {
       color: red;
   }
</style>

App.svelte

<script>
    import First from './First.svelte';
    import Second from './Second.svelte';
</script>

<First />
<Second />

완성 화면

이렇게 동작할 수 있는 이유는 스타일 태그 안에 작성된 스타일에 고유의 값을 가진 클래스 속성이 추가되기 때문이다. 추가되는 클래스는 컴포넌트마다 고유한 값을 가지고 있다.

개발자 도구로 살펴보면 각각 클래스 속성에 svelte-1xbl3aw, svelte-qehlz6 고유한 클래스가 추가된 것을 볼 수 있다.

:global 수식어

위에서 알아본 것처럼 A 컴포넌트의 스타일 태그에서 작성한 스타일은 B 컴포넌트의 스타일에 영향을 주지 않는다. 대부분의 경우에서는 컴포넌트 내에서 정의된 스타일만 적용되는 것이 바람직하다. 그러다 다음 코드와 같은 경우가 필요할 때도 있다.

Child.svelte

<!-- src/Child.svelte -->
<p>Active 되면 글자 색을 바꾸고 싶어요.</p>

App.svelte

<script>
    import Child from './Child.svelte';
    let active = false;
</script>

<div class:active>
    <Child />
    <button on:click={() => active = !active}>Toggle</button>
</div>

<style>
    div.active :global(p) {
        color: red;
    }
</style>

완성 화면

:global 수식어의 동작 원리는 :global 수식어가 사용된 HTML 태그에는 고유한 클래스가 추가되지 않는다는 것에 있다. 따라서 :global 수식어를 사용한 선택자는 고유한 클래스가 붙지 않아, 전역 선택자 역할을 하게 된다.

📖 HTML 문자열 표현

<script>
    let string = 'Hello <strong>world</strong>!'
</script>

<p>{string}</p>

문자열에 HTML 태그가 포함되어 있지만 단순 문자열로 인식되기 때문에 화면에 태그가 그대로 보인다.

<script>
    let string = 'Hello <strong>world</strong>!'
</script>

<p>{@html string}</p>

@html 어노테이션을 사용하면 문자열로 표현된 HTML 태그를 화면에 나타낼 수 있다.

이제는 필수가 되어 버린 Git에서 자주 쓰이는 명령어에 대해 알아보자.

💡 Git 주요 명령어 정리

git status

현재 상태 확인 (추가된 파일, 수정된 파일 등)

git status

git log

커밋 기록 조회

git log

git add

변경 내역이 있는 파일을 스테이징 영역에 추가

git add 변경된파일명
git add .   # 모든 변경된 파일 추가

git restore

스테이징에서 파일을 내림

git restore --staged 파일명
git restore --staged . # 모든 파일을 스테이징에서 내림

git commit

스테이징된 파일을 로컬 저장소에 커밋

git commit -m "커밋 메시지"

이미 커밋한 내용을 변경하고 싶다면?

간혹 이미 커밋한 내용을 변경해야 할 때가 있는데 이때는 에디터를 열어 수정 후 저장해 주면 된다.

git commit --amend

필요한 내용 수정
esc 키 입력
:wq 입력 (변경 내용 저장 후 나가기) / :q 입력 (변경 내용을 저장하지 않고 나가기)

git push

로컬 커밋을 원격 저장소에 푸시

git push origin 브랜치명

git pull

원격 저장소의 변경 사항을 로컬로 가져오기 위해 풀

git pull origin 브랜치명

git merge

다른 브랜치와 병합

git merge 브랜치명

git branch -d

브랜치 삭제

git branch -d 브랜치명 # 로컬 브랜치 삭제
git branch -D 브랜치명 # 로컬 브랜치 강제 삭제
git push origin --delete 브랜치명 # 원격 브랜치 삭제

git branch -m

브랜치 이름 변경

git branch -m 새_브랜치명 # 현재 체크아웃된 로컬 브랜치 이름 변경
git branch -m 기존_브랜치명 새_브랜치명 # 체크아웃된 브랜치가 아닌 다른 브랜치 이름 변경

git fetch

원격 저장소의 최신 정보 가져옴

git fetch origin

git checkout

브랜치 체크아웃 (git fetch 후 사용하기!)

git checkout -b 로컬_브랜치명 origin/원격_브랜치명

👋 들어가며

사적으로 Svelte를 공부해 보고 싶은 마음 + 공적으로 실무에서 Svelte를 사용하게 됨으로 인해 오늘부터 Svelte에 관련된 글을 작성해 보려고 한다. 공부를 위해 Svelte로 맛보는 웹 애플리케이션 개발이라는 서적을 구매하였기 때문에 본 시리즈는 이 책과 함께 진행될 예정이다. 가 보자고 😎

🤔 Svelte란 무엇인가

Svelte란 자바스크립트 라이브러리 중 하나로, 리액트보다 가볍고 뷰보다 쉽다는 장점을 내세운 비교적 최신 프론트엔드 기술이다.

No Virtual Dom

스벨트의 가장 큰 특징은 가상 돔이 없다는 것이다. 스벨트는 실행 시점이 아닌 빌드 시점에 모든 코드들을 바닐라 js로 변경시킨다. 컴파일러의 개념인 것이다. 따라서 배포 시 프레임워크, 라이브러리처럼 함께 배포되는 개념이 아니기 때문에 더욱 가볍다. 결과적으로 속도가 더 빨라지게 된다.

💬 초기 세팅을 해 보자

#1 Svelte 개발자 도구 설치

크롬 앱 중 Svelte Devtools를 사용하면 컴포넌트의 데이터를 확인할 수 있어 좀 더 편한 디버깅이 가능하다. Svelte Devtools로 가서 확장 프로그램을 크롬에 추가해 주자.

#2 VS Code, Node.js 설치

이 부분의 설명은 생략하도록 하겠다.

😎 첫 프로젝트 생성하기

스벨트는 롤업과 웹팩을 사용하는 2개의 템플릿 프로젝트를 제공한다.

- 롤업과 웹팩 대표적으로 여러 개 자바스크립트 파일을 하나 또는 설정에 따라 그 이상의 자바스크립트 파일로 뭉친 후, 다른 사람들이 보기 어렵게 난독화하는 역할을 한다. 롤업과 웹팩을 번들러라고 한다.

#1 롤업 프로젝트 생성

VS Code 터미널에 아래 코드를 입력하여 롤업 번들러를 사용하는 Svelte 프로젝트를 생성한다.

$ npx degit sveltejs/template svelte-app # svelte-app 폴더에 프로젝트를 생성
$ cd svelte-app # svelte-app 폴더로 이동
$ npm install # package 설치
$ npm run dev # svelte-app 프로젝트 실행

터미널에 이런 문구가 뜬다면 프로젝트 생성 및 실행에 성공한 것이다. 주소 창에 로컬 주소를 입력하면 다음과 같은 웹 페이지를 확인할 수 있다.

#2 웹팩 프로젝트 생성

이번에는 웹팩 번들러를 사용하는 Svelte 프로젝트를 생성해 보자. 둘 다 생성할 필요는 없고, 롤업 또는 웹팩 중 내게 알맞은 번들러를 사용하면 된다.

$ npx degit sveltejs/template-webpack svelte-app # svelte-app 폴더에 프로젝트를 생성
$ cd svelte-app # svelte-app 폴더로 이동
$ npm install # package 설치
$ npm run dev # svelte-app 프로젝트 실행

🔎 프로젝트 구조 살펴보기

스벨트 프로젝트의 디렉터리 구조는 위와 같다. 각 폴더 및 파일의 용도는 아래에 정리해 보았다.

• public/ : public 폴더가 프로덕션 환경에 배포되어야 한다.

  • build/ : 빌드되어 생성된 번들 파일이 모이게 되는 폴더 -> 웹팩 프로젝트의 경우 build 폴더 없이 public 폴더 아래에 번들 파일이 생성됨!
  • bundle.css : .svelte 파일 안에서 사용한 style 태그들이 번들되어 생성된 스타일 번들 파일
  • bundle.js : .svelte 파일이 빌드되어 생성된 js 번들 파일
  • bundle.js.map : 오류가 발생할 경우 오류 위치를 표시하기 위한 매핑 파일 (디버깅)
  • global.css : 전역 스타일을 정의하기 위한 스타일 파일 -> bundle.css 파일에 정의한 스타일이 우선 순위가 더 높음
  • index.html : 웹 페이지의 인덱스 파일

• src/ : 대부분의 코딩이 이루어지는 폴더이다.

  • App.svelte : 프로젝트의 루트 컴포넌트 -> src/main.js에서 App 컴포넌트를 불러와 사용함
  • main.js : 프로젝트의 첫 시작 파일

PWA 만드는 방법에 대해 알고, 나의 PWA 커스터마이징 해 보기!

🔎 PWA

PWA란 Progressive Web Apps의 줄임말로, 모바일 기기에서 네이티브 앱과 같은 사용자 경험을 제공하는 웹 앱이다. 기존 전통적인 웹 앱과 는 달리 네이티브 앱과 유사한 기능을 제공할 수 있다는 것이 큰 장점이다. PWA를 사용하면 사용자가 앱을 다운로드하거나, 업데이트할 필요 없이 웹 브라우저를 통해 앱을 바로 사용할 수 있다!

장점

• 스마트폰, 태블릿 바탕화면에 내 웹 사이트를 설치할 수 있음
• 오프라인에서도 동작할 수 있음
• 설치 유도 비용이 적음

필수 조건

manifest.json과 service-worker.js 파일이 있어야 한다. 아래 방법을 사용하여 PWA 프로젝트를 만든다면 이 파일들이 자동으로 생성된다.

manifest.json

웹 앱의 아이콘, 이름, 테마 색 등을 설정할 수 있는 파일

{
  "short_name": "React App", // 설치 후 앱 런처나 바탕화면에 표시할 이름 12자
  "name": "Create React App Sample", // 기본 이름
  "icons": [ // 여러 가지 사이즈별 아이콘 이미지 경로
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".", // 앱 아이콘 클릭 시 보여 줄 메인 페이지 경로
  "display": "standalone", // standalone 또는 fullscreen
  "theme_color": "#000000", // 상단 탭 색상 등 원하는 테마 색상
  "background_color": "#ffffff" // 앱 처음 실행 시 잠깐 뜨는 splashscreen의 배경 색
}

service-worker.js

웹 앱을 설치했을 때 어떤 CSS, JS, HTML, 이미지 파일이 하드에 설치될지 결정할 수 있는 파일 -> Cache Storage에 저장하여 오프라인에서도 사이트를 열 수 있게 도와줌

😎 PWA 사용해 보기

1. PWA 프로젝트 생성

npx create-react-app 프로젝트명 --template cra-template-pwa

프로젝트 폴더를 VS Code로 연 다음, 터미널에 위 명령어를 입력하여 새로운 리액트 앱을 만든다. PWA를 만들기 위해서는 꼭 이와 같이 터미널에 명령어를 입력해야 하는데, 만약 기존 프로젝트를 PWA로 만들고 싶을 때는 어떻게 하면 될까? 그냥... 새 PWA 프로젝트를 만들고 기존 코드를 복사 붙여넣기 하면 된다. 👼

2. index.js 파일 수정

index.js

...

serviceWorkerRegistration.register(); // 기존에 작성되어 있는 unregister를 register로 변경

...

위 파일을 수정한 뒤 빌드하고 배포하면 끝!

3. 개발자 도구로 디버깅

크롬 개발자 도구로 PWA에 관련된 모든 것을 살펴볼 수 있다. PWA로 만들어진 사이트 flipkart로 확인해 보자.

개발자 도구 > Application 탭에 들어가면 Manifest, Service Workers, Cache storage 항목이 보이는데 각각 하나씩 알아보자.

Manifest

manifest.json 내용을 확인할 수 있음

Service Workers

service-worker 파일이 잘 있는지, 오프라인에서 잘 동작하는지, 푸시 알림이 잘 전송되는지 등을 테스트할 수 있음

Cache Storage

service-worker 덕분에 하드에 설치된 CSS, JS, HTML 파일들을 확인하고, 캐시된 파일을 제거할 수 있음

👋 마치며

평소에 모바일로 쇼핑몰에 들어갔을 때, 앱 설치를 하지 않았지만 내 폰 배경화면에 앱 형태로 설치되는 것을 보고 신기했던 경험이 있는데 이게 바로 PWA였다니! 여러 장점을 가지고 있는 만큼 편리한 기능인 것 같다. 👍

이번 포스팅에서는 지난 포스팅에 이어 프로젝트 성능 개선 시 유용한 기능 몇 가지를 담아 보려고 한다.

📝 memo

컴포넌트가 재렌더링되면 그 안에 있는 자식 컴포넌트 또한 항상 함께 재렌더링이 된다. 평소에는 큰 문제가 없겠지만, 만약 자식 컴포넌트가 렌더링 시간이 1초 넘게 걸리는 무거운 컴포넌트면 어떻게 할까? 부모 컴포넌트에 있는 버튼을 누를 때마다 1초가 지연되는 문제가 발생하고 만다. 😐

이럴 때 사용하는 것이 memo다.

사용하기

간단한 예시와 함께 불필요한 재렌더링을 막아 보자.

import { memo, useState } from 'react'

let Child = memo( function(){
  console.log('재렌더링됨')
  return <div>자식 컴포넌트</div>
})

function Cart(){ 

  let [count, setCount] = useState(0)

  return (
    <Child/>
    <button onClick={()=>{ setCount(count+1) }}> + </button>
  )
}

Child로 전송되는 props가 변하는 경우에만 재렌더링이 되는 것을 콘솔창으로 확인할 수 있다.

이렇게만 보면 memo는 세상 편리해 보이는데.. 그렇다고 막 쓰는 건 안 된다. memo로 감싼 컴포넌트는 불필요한 재렌더링을 막기 위해 기존 props와 바뀐 props를 비교하는 연산이 추가로 진행되는데, 만약 props가 크고 복잡하다면 이 자체로도 큰 부담이 될 수 있다.

따라서 결론 : "꼭 필요한 곳에만 사용하자" 😶

📋 useMemo

위 memo와 유사한 useMemo라는 문법도 있다. 이것은 쉽게 말하자면 useEffect와 유사한 용도이다. 컴포넌트 로드 시 1회만 실행하고 싶은 코드가 있다면 useMemo에 담으면 된다.

사용하기

import { useMemo, useState } from 'react';

function 함수(){
    return 반복문 10억 번 돌린 결과
}

...

function Cart(){

    let result = useMemo(()=>{return 함수()}, [state])
    /* 컴포넌트 렌더링 시 1회만 실행해 줌 */

    return (
        <Child />
        <button onClick={()=>{ setCount(count+1) }}> + </button>
      )
...

이렇게 작성한다면 useMemo에 담긴 '반복문을 10억 번 돌리는' 함수가 컴포넌트 로드 시 1회만 실행된다. 그렇다면 재렌더링 될 때마다 동작을 하지 않으니 좀 더 성능을 개선할 수 있다! useEffect처럼 특정 state, props가 변할 때만 실행하도록 코드를 짤 수도 있다.

🧚‍♀️ useTransition

재렌더링이 느린 컴포넌트의 성능을 개선할 수 있는 useTransition이라는 훅이 존재한다. 간단한 예시로 알아보도록 하자.

사용하기

import {useState, useTransition} from 'react'

/* 데이터가 10000개 있는 array 자료 만들기 */
let a = new Array(10000).fill(0)

function App(){
  let [name, setName] = useState('')
  let [isPending, startTransition] = useTransition()

  return (
    <div>
      <input onChange={ (e)=>{ 
        /* 다른 코드들보다 나중에 처리하기 */
        startTransition(()=>{
          setName(e.target.value) 
        })
      }}/>

      {
        /* array에 담긴 개수만큼 div 생성하기 */
        a.map(()=>{
          return <div>{name}</div>
        })
      }
    </div>
  )
}

의도적으로 재렌더링이 느린 컴포넌트를 만들고, useTransition을 사용해 보았다. 이렇게 작성했을 때 성능이 개선되는 이유는 startTransition() 함수로 묶은 state 변경 함수가 다른 코드들보다 나중에 처리되기 때문인데. 따라서 <input> 타이핑처럼 즉각적으로 반응해야 하는 코드가 먼저 실행되고, 사용자가 느끼는 반응 속도도 훨씬 빠르게 느껴진다.

물론 근본적인 성능 개선이라기보다는 특정 코드의 실행 시점을 뒤로 옮겨 주는 것일 뿐이다. 😅

isPending은 뭐지?

startTransition()으로 감싼 코드가 처리 중일 때 true로 변하는 변수

{
  isPending ? "로딩 중..💭" :
  a.map(()=>{
    return <div>{name}</div>
  })
} 

이 변수를 활용하여 이런 식으로 로딩 화면을 만들어 보는 것도 가능하다!

🧚‍♂️ useDeferredValue

useDeferredValue는 startTransition()과 용도가 같다. 그러나 useDeferredValue는 state 또는 변수 하나를 집어 넣을 수 있고, 이 state나 변수에 변동사항이 생기면 나중에 처리해 준다.

사용하기

import {useState, useTransition, useDeferredValue} from 'react'

let a = new Array(10000).fill(0)

function App(){
  let [name, setName] = useState('')

  /* state에 변동사항이 생겼을 때 나중에 처리해 줌 */
  /* 처리 결과를 state1에 저장함 */
  let state1 = useDeferredValue(name)

  return (
    <div>
      <input onChange={ (e)=>{ 
          setName(e.target.value) 
      }}/>

      {
        a.map(()=>{
          return <div>{state1}</div>
        })
      }
    </div>
  )
}

이렇게 작성하면 위와 같은 기능을 개발할 수 있다.

이번 포스팅에서는 프로젝트의 성능을 개선할 수 있는 몇 가지 방법들을 담아 보려고 한다. 🙂

🍧 React DevTools

출처🔎 GeeksforGeeks

React의 컴포넌트를 검사하고 props와 state를 편집할 수 있으며, 성능 문제를 식별할 수 있도록 도와주는 Chrome 확장 프로그램

설치하기

Chrome 웹 스토어에서 React Developer Tools를 검색하여 설치하면 된다.

사용하기

프로젝트를 실행한 뒤 개발자 도구를 열어 보면 상단 탭 영역에 Components와 Profiler가 추가된 모습을 볼 수 있다.

Components

이처럼 왼쪽에서 컴포넌트 구조 파악이 가능하다. 왼쪽 상단 아이콘을 눌러 컴포넌트를 클릭하면 컴포넌트 안에 있는 state와 props 등이 조회 가능하다. 값을 수정해 볼 수도 있다!

Profiler

Profiler 탭에서는 컴포넌트의 렌더링 시간을 측정할 수 있다.

상단의 녹화 버튼을 누른 뒤 페이지 이동이나 버튼 조작을 해 보고, 다시 녹화 버튼을 눌러 녹화를 종료한다. 그러면 방금 렌더링된 모든 컴포넌트의 렌더링 시간을 측정해 준다. 만약 이상하게 느린 컴포넌트가 있다면 여기서 범인을 찾아 수정해 줄 수 있다.

🍨 Redux DevTools

Redux Store에 있던 state를 개발자 도구에서 조회할 수 있게 해 주는 Chrome 확장 프로그램

Redux DevTools를 사용하면 Redux store에 있던 state를 전부 확인 가능하다. 또한 dispatch를 날릴 때마다 생기는 변화들에 대해 로그를 작성해 준다. store가 복잡해졌을 때 사용하면 유용하다.

설치하기

Chrome 웹 스토어에서 Redux DevTools를 검색하여 설치하면 된다.

사용하기

프로젝트를 실행한 뒤 개발자 도구를 열어 보면 상단 탭 영역에 Redux가 추가된 모습을 볼 수 있다.

store.js의 일부

...

let cart = createSlice({
    name : 'cart',
    initialState : [
        {id : 0, name : 'White and Black', count : 2},
        {id : 2, name : 'Grey Yordan', count : 1}
    ],
    reducers : {
        ...

        addCart(state, action){
            state.push(action.payload)
        }
    }
})

export let {addCount, addCart} = cart.actions

export default configureStore({
  reducer: {
    user : user.reducer,
    stock : stock.reducer,
    cart : cart.reducer
  }
}) 

내가 Redux store에 담아 놓았던 addCart를 개발자 도구로 확인할 수 있는 모습!

🥱 lazy import

리액트 코드를 다 작성했다면 npm run build를 입력해서 그 코드들을 html, css, js 파일로 변환해야 한다. 리액트로 만드는 Single Page Application은 html, js 파일이 하나만 생성된다는 특징이 있는데, 그 안에는 지금까지 만든 파일들의 모든 내용이 들어 있어서 파일 사이즈가 크다. 따라서 리액트 사이트들은 첫 페이지 로딩 속도가 매우 느릴 수 있다는 단점이 있는데.. 😯

이러한 단점을 보완하려면 js 파일을 잘게 쪼개면 된다. 첫 페이지 로딩 시 굳이 필요 없는 컴포넌트들을 다른 js 파일로 쪼개 놓고, 필요 시에만 로딩할 수 있도록 한다면 첫 페이지의 로딩 속도를 향상시킬 수 있다. 이때 사용하는 것이 바로 lazy import이다.

사용하기

기존 진행 중인 쇼핑몰 프로젝트로 예시를 들어 보려고 한다.

App.js의 일부

...
import Detail from './routes/Detail.js'
import Cart from './routes/Cart.js'
...

기존 이렇게 import 되어 있던 코드들. Detail은 사용자가 상세 페이지로 이동했을 때 필요한 컴포넌트고, Cart는 해당 상품을 장바구니에 넣었을 때 필요한 컴포넌트다. 따라서 첫 페이지 로딩 시에는 필요가 없다.

...
import { lazy } from 'react'

const Detail = lazy( () => import('./routes/Detail.js') )
const Cart = lazy( () => import('./routes/Cart.js') )
...

이렇게 lazy 문법을 사용하면 "Detail, Cart 컴포넌트가 필요해지면 import 해 주세요!"라는 뜻이 된다.

만약 컴포넌트 로드까지 지연이 발생하면?

lazy를 사용하면 당연히 Detail, Cart 컴포넌트 로드까지 지연 시간이 발생할 수 있다. 이럴 때는 Suspense를 사용하면 된다.

...
import { Suspense } from 'react';
...
      <Suspense fallback={<div>로딩 중..💭</div>}>
        <Routes>
            ...
        </Routes>
      </Suspense>
...

이렇게 작성해 주면 lazy로 쪼개 놓은 컴포넌트가 로드 될 때 로딩 화면을 보여 줄 수 있다! 😎

React Query란 무엇인지 알아보고, 이를 사용하여 사용자 이름 조회하기

💡 React Query란?

리액트 쿼리란 React Application에서 서버 상태를 불러 오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리이다.

고민 네 가지 🤔

💭 ajax 성공 또는 실패 시 html을 보여 주려면... 💭 몇 초마다 자동으로 ajax를 요청하려면... 💭 실패 시 몇 초 후 요청을 재시도하려면... 💭 prefetch를 하려면...

리액트 쿼리는 위 기능들을 쉽게 구현할 수 있도록 도와준다. 간단히 말하면 실시간 데이터를 계속 가져와 사용해야 하는 사이트 개발 시 유용하다.

장점

• 성공/실패/로딩 중 여부를 쉽게 파악할 수 있음

  변수명.data // 성공 시 true 반환
  변수명.isLoading // 로딩 중일 시 true 반환
  변수명.error // 실패 시 true 반환

• 틈만 나면 자동으로 refetch를 해 줌
• 실패 시 자동으로 재시도를 해 줌
• ajax로 가져온 결과는 state 공유가 필요 없음
• ajax 결과를 캐싱해 줌

설치하기

npm install react-query

위 코드를 터미널에 입력하여 설치한다.

세팅하기

index.js

...
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

...

root.render(
  <QueryClientProvider client={queryClient}>
    ...
  </QueryClientProvider>
);

index.js에 위와 같이 작성해 주면 세팅 끝!

예시로 사용 방법 알기

이제 리액트 쿼리를 사용해서 진행 중인 쇼핑몰 프로젝트에서 사용자의 이름을 조회해 볼 것이다.

App.js

...
import { useQuery } from 'react-query';
...

function App() {

  ...

  let result = useQuery('작명', ()=>{
    return axios.get('https://codingapple1.github.io/userdata.json').then((a)=>{
      console.log('요청됨')
      return a.data
    })
  })
  ...


  return (
    <div className="App">

    ...
          <Nav className='ms-auto'>
            { result.isLoading && '로딩 중..💭' } {/* 로딩 시 출력 */}
            { result.error && '에러 😯' } {/* 실패 시 출력 */}
            { result.data && ('반가워요, ' + result.data.name + ' 님!') } {/* 성공 시 출력 */}
          </Nav>
    ...

사용자 이름 조회가 성공하여 해당 html이 출력되는 모습! 😎

localStorage에 대해 알고, 이를 사용하여 최근 본 상품 기능 구현하기!

🌵 Web Storage

이미지 출처💬 LoginRadius

특징

• key-value의 쌍 형태로 데이터를 저장함
• 쿠키와 달리 서버에 전송되지 않아 서버에 부담이 가지 않음
• 쿠키와 달리 필요할 때만 꺼내 쓰기 때문에 자동 전송의 위험이 없음
• 도매인 단위로 접근이 제한됨
• 쿠키는 4KB까지 데이터를 저장할 수 있지만, 웹 스토리지는 5KB까지 저장 가능함
• 유효 기간이 존재하지 않음
• String 데이터 타입만 지원함

종류

Local Storage

window.localStorage 객체로 브라우저를 종료해도 유지되는 데이터 (브라우저를 정리해야만 삭제됨)

개발자 도구의 Application-Local Storage 탭에서 확인할 수 있다.

Session Storage

window.sessionStorage 객체로 탭/윈도우를 닫기 전까지 유지되는 데이터

개발자 도구의 Application-Session Storage 탭에서 확인할 수 있다.

사용 방법

데이터 저장

localStorage.setItem('이름','값') // Local Storage
sessionStorage.setItem('이름','값') // Session Storage

만약 object 자료를 저장하고 싶다면?

let obj = { 이름 : '값'};
localStorage.setItem('data', JSON.stringify(obj));

이럴 때는 JSON을 사용하면 된다. 🙂

데이터 출력

localStorage.getItem('이름') // Local Storage
sessionStorage.getItem('이름') // Session Storage

object 자료 출력도 JSON을 쓰자 👍

JSON.parse(localStorage.getItem('data'))

데이터 삭제

localStorage.removeItem('이름') // Local Storage
sessionStorage.removeItem('이름') // Session Storage

데이터 수정

데이터를 수정하는 문법은 따로 없다. 따라서 데이터를 꺼낸 뒤 수정하고 다시 저장하면 된다.

문법까지 알았으니 이제 본격적으로 기능을 구현해 보자!

👏 최근 본 상품 UI 만들기

App.js

...
  useEffect(()=>{
    let arr = [];

    /* 아직 본 상품이 없을 경우에만 배열 생성 (home으로 이동 시 배열 초기화 방지) */
    if(arr.length === 0){
      localStorage.setItem('watched', JSON.stringify(arr)) /* array 생성 */
    }
  },[])
...

Detail.js

...
    /* 페이지에 접속 시 최근 본 상품 추가하기 */
    useEffect(()=>{
        let watchedList = JSON.parse(localStorage.getItem('watched'));
        watchedList.push(id);

          /* Array를 Set으로 바꾸기 (중복 방지) */
        watchedList = new Set(watchedList); 
        /* Set을 Array로 바꾸기 */
        watchedList = Array.from(watchedList); 

          /* 상품이 추가된 배열을 다시 localStorage에 추가하기 */
        localStorage.setItem('watched', JSON.stringify(watchedList));
    },[])
...

    return (

      ...
            <div>
                <h5>최근 본 항목</h5>
                <Row>
                    {
                        watchedList.map((id, i)=>{
                            let shoe = shoes[id];
                            return(
                                <div key={i}>
                                    <Col>
                                        <Link to={'/detail/'+shoe.id}>
                                            {shoe.title}
                                        </Link>
                                    </Col>
                                </div>
                            )
                        })
                    }
                </Row>
            </div>
    ...

이제 상품 상세 페이지로 이동할 때마다 조회한 상품의 id가 localStorage에 저장된다. 개발자 도구로 확인해 보자.

정말로 상품 id가 추가되어 있는 모습!

set으로 중복을 방지해 주었기 때문에 같은 상품을 여러 번 조회하여도 값이 하나만 저장된다.

저장된 상품 id로 최근 본 상품의 이름을 출력하고, 이름 클릭 시 해당하는 상품의 상세 페이지로 이동할 수 있게 링크도 걸어 보았다. (css는 생략.. 😅)

이번 포스팅에서는 리액트에서 자주 사용하는 if문 작성 패턴 5개를 정리해 보았다.

🔮 자주 쓰는 if문

컴포넌트 안에서 쓰는 if-else

function Component() {
  if ( true ) {
    return <p>true일 때의 HTML</p>;
  } else {
    return null;
  }
}

else 생략 가능

function Component() {
  if ( true ) {
    return <p>true일 때의 HTML</p>;
  } 
  return null;
} 

else와 중괄호를 하나 없애도 위 코드와 같은 기능을 한다. JS function 안에서는 return이라는 키워드를 만나면 return 아래에 있는 코드는 더 이상 실행되지 않기 때문이다.

JSX 안에서 쓰는 삼항 연산자

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>true일 때의 HTML</p>
        : null
      }
    </div>
  )
} 

기존 삼항 연산자와 동일하게 조건문 ? 조건문 true 시 실행할 코드 : false 시 실행할 코드 형식으로 작성하면 된다.

&& 연산자로 if 역할 대신하기

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>true일 때의 HTML</p>
        : null
      }
    </div>
  )
} 

function Component() {
  return (
    <div>
      { 1 === 1 && <p>true일 때의 HTML</p> }
    </div>
  )
}

위 코드 두 개는 동일한 역할을 한다. 왼쪽 조건식이 true이면 오른쪽 JSX가 그 자리에 남고, 왼쪽 조건식이 false면 false가 남는다.

JS는 &&로 연결된 값들 중 처음 등장하는 false 값을 찾아주고, 만약 그게 아니라면 마지막 값을 남겨 주기 때문!

switch-case 조건문

function Component2(){
  var user = 'seller';
  switch (user){
    case 'seller' :
      return <h4>판매자 로그인</h4>
    case 'customer' :
      return <h4>구매자 로그인</h4>
    default : 
      return <h4>일반 로그인</h4>
  }
}

기존 switch문 문법과 동일하게 작성해 주면 된다. default :는 맨 마지막에 쓰는 else문과 동일하다고 생각하면 쉽다. if문을 연달아 쓸 때 코드가 짧아진다는 장점이 있지만, 조건식 란에서 변수 하나만 검사할 수 있다는 것이 단점이다. 😯

object/array 자료형 응용

만약 경우에 따라서 다른 html 태그들을 보여 주고 싶을 때는 어떻게 코드를 작성하면 좋을까? 이럴 때는 JS의 object/array 자료형을 사용하면 편리하다.

function Component() {
  var state = 'info';
  return (
    <div>
      {
        { 
           info : <p>상품 정보</p>,
           shipping : <p>배송 관련</p>,
           refund : <p>환불 약관</p>
        }[state]
      }

    </div>
  )
}

// 또는

var tabUI = { 
  info : <p>상품 정보</p>,
  shipping : <p>배송 관련</p>,
  refund : <p>환불 약관</p>
}

function Component() {
  var state = 'info';
  return (
    <div>
      {
        tabUI[state]
      }
    </div>
  )
} 

이렇게 작성하면 state가 'info'일 때는 info 항목에 저장된 <p> 태그가 보여지고, state가 'refund'라면 refund 항목에 저장된 <p> 태그가 보여질 것이다.

이런 식으로 간단하고 직관적인 if문을 작성할 수 있다!

Redux를 사용하여 장바구니 기능 구현하기 🛒

😯 Redux란?

Redux는 상태 관리를 도와주는 라이브러리이다. 리액트에서 컴포넌트가 많아지면 상위에서 하위로 데이터를 보내 줄 때 수많은 props를 거쳐야 하는데, 이렇게 되면 상태 관리가 복잡해지게 된다. (이것이 바로 Props drilling)

이러한 문제점을 해결하기 위해 사용하는 것이 바로 Redux이다. 리덕스는 전역으로 상태를 관리해 주는 저장소를 제공해 준다. 따라서 컴포넌트들이 props 없이 state 공유가 가능해진다.

설치하기

npm install @reduxjs/toolkit react-redux

터미널에 위 코드를 입력하여 Redux Toolkit을 설치해 준다.

세팅하기

먼저 src 폴더에 store.js 파일을 생성한 뒤 아래 코드를 작성한다.

store.js

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {

  }
}) 

그리고 index.js로 가서 아래 코드를 작성해 준다.

index.js

...

import { Provider } from 'react-redux';
import store from './store.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  <Provider store={store}> // 이 부분이 추가됨!
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
  // </React.StrictMode>
);

reportWebVitals();

이렇게 하면 세팅까지 끝!

문법 알기

store에 state 보관하기

이제 store.js, 즉 Redux store에 여러 개의 state들을 보관할 수가 있는데, state를 보관하는 문법은 아래와 같다.

import { configureStore, createSlice } from '@reduxjs/toolkit'

let 변수명 = createSlice({ /* state 하나를 slice라고 부름 */
    name : 'state이름',
    initialState : 'state값'
})

export default configureStore({
  reducer: {
    작명 : state이름.reducer
  }
}) 

store에 보관한 state 가져오기

useSelector((state)=>{return state})

이렇게 작성하면 저장해 놓은 state를 꺼내 쓸 수 있다. 😀

store의 state 변경하기

Step1💡 state 변경 함수 만들기

store.js

let 변수명 = createSlice({ /* state 하나를 slice라고 부름 */
    name : 'state이름',
    initialState : 'state값'
    reducers : {
        함수명(state){
            return 함수 실행 시 수행될 코드
        }
    }
})

Step2💡 export 하기

store.js

export let { 함수명 } = 변수명.actions

Step3💡 dispatch( state변경함수() ) 작성하기

버튼 클릭 시 함수가 실행되는 예시로 설명해 보았다.

Cart.js

import { useDispatch } from 'react-redux';
import { 함수명 } from './../store.js';

function 컴포넌트명(){
    let dispatch = useDispatch()

    return(
        <button onClick={()=>{
            dispatch(함수명())
        }}></button>
    )
}

...

🛒 이제 진짜 장바구니 만들기

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'
import user from './store/userSlice'

let stock = createSlice({
    name : 'stock',
    initialState : [10,11,12]
})

let cart = createSlice({
    name : 'cart',
    initialState : [
        {id : 0, name : 'White and Black', count : 2},
        {id : 2, name : 'Grey Yordan', count : 1}
    ],
    reducers : {
        addCount(state, action){
            let i = state.findIndex((a)=>{ return a.id == action.payload })
            state[i].count++
        },
        addCart(state, action){
            state.push(action.payload)
        }
    }
})

export let {addCount, addCart} = cart.actions

export default configureStore({
  reducer: {
    user : user.reducer,
    stock : stock.reducer,
    cart : cart.reducer
  }
}) 

Cart.js

import { Table } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux';
import { changeName, increase } from './../store/userSlice.js';
import store from '../store.js';
import { addCount } from '../store.js';

function Cart(){

    let state = useSelector((state)=>{return state})
            /* Redux store에 있는 state 가져다 씀 */
    let cart = state.cart
    let dispatch = useDispatch()

    return(
        <>
            <h6>{state.user.age}살 {state.user.name} 님의 장바구니</h6>
            <button onClick={()=>{
                dispatch(increase(10))
            }}>이름 변경</button>
            <button onClick={()=>{
                dispatch(changeName())
            }}>나이 변경</button>

            <Table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>상품명</th>
                    <th>수량</th>
                    <th>변경하기</th>
                </tr>
            </thead>
            <tbody>
                {
                    cart.map((a,i)=>
                        <tr key={i}>
                            <td>{cart[i].id}</td>
                            <td>{cart[i].name}</td>
                            <td>{cart[i].count}</td>
                            <td><button onClick={()=>{dispatch(addCount(cart[i].id))}}>+</button></td>
                        </tr>
                    )
                }
            </tbody>
            </Table> 
        </>
    )
}

export default Cart;

Detail.js

...

import { addCart } from "./../store.js"
import { useDispatch } from "react-redux";
...

function Detail(props) {

  ...

    let dispatch = useDispatch()
    ...
                    <button className="btn btn-danger" onClick={()=>{
                        dispatch(addCart({id:item.id, name:item.title, count: 1}))
                    }}>주문하기</button>
    ...

구현 화면은 아래와 같다.

장바구니에서 이름, 나이, 수량을 간단하게 변경해 볼 수 있다.

또한 상세 페이지에서 '주문하기' 버튼 클릭 시 장바구니에 추가되는 기능 또한 구현해 보았다. 👍

transition으로 컴포넌트 전환 애니메이션을 주자! 😎

💬 전환 애니메이션 주는 방법

Step1 💡 애니메이션 동작 전 className 만들기 Step2 💡 애니메이션 동작 후 className 만들기 Step3 💡 className에 transition 속성 추가하기 Step4 💡 원할 때 2번 className 부착하기

👀 코드로 살펴보기

App.css

.start{
  opacity: 0;
}

.end{
  opacity: 1;
  transition: opacity 0.5s; /* opacity가 변경될 때 0.5초에 걸쳐서 변경 */
}
...

Detail.js

...
function TabContent({tab}){
    let [fade, setFade] = useState('')
    useEffect(()=>{
        let a = setTimeout(()=>{setFade('end')}, 100)
        return()=>{
            clearTimeout(a)
            setFade('')
        }
    },[tab])

    return(
        <div className={'start ' + fade}>
            { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab] }
        </div>
    )
}
...

여기서 잠깐!

setTimeout을 쓴 이유는 무엇일까?

바로 React 18부터 생긴 Automatic Batching 기능 때문이다. 이 기능은 내부 소스, 외부 소스 상관 없이 state 업데이트를 일괄 처리하여 렌더링이 한 번에 이루어질 수 있도록 해 준다. 따라서 내가 return 문에 setFade('')를 적었다고 해도, 렌더링 시 setFade('')와 setFade('end')가 동시에 이루어지기 때문에 fade 기능이 제대로 구현되지 않은 것이다.

따라서 시간 차이를 두기 위해 setTimeout 함수를 사용한 것이다!

쇼핑몰 프로젝트에 탭 UI를 만들어 보자!

💫 탭 UI 만들어 보기

탭 UI를 만들기 위해 React Bootstrap - nav에 들어가 원하는 레이아웃을 선택한 뒤 진행하였다.

Detail.js

...

import { Nav } from "react-bootstrap";

function Detail(props) {
    ...
    let [tab, setTab] = useState(0); /* 숫자에 따라 n번째 내용이 보이는 형태 */

    ...

    return (
    ...

            <Nav variant="tabs"  defaultActiveKey="link0">
                <Nav.Item>
                <Nav.Link eventKey="link0" onClick={()=>{setTab(0)}}>버튼0</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                <Nav.Link eventKey="link1" onClick={()=>{setTab(1)}}>버튼1</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                <Nav.Link eventKey="link2" onClick={()=>{setTab(2)}}>버튼2</Nav.Link>
                </Nav.Item>
            </Nav>

            <TabContent tab={tab}/>

        </div>
    )
}

function TabContent({tab}){
    return(
        /* 첫 번째 방법 (if문 사용)*/
        // if(tab == 0){
        //     return <div>내용0</div>
        // }
        // if(tab == 1){
        //     return <div>내용1</div>
        // }
        // if(tab == 2){
        //     return <div>내용2</div>
        // }

          /* 두 번째 방법 (배열 사용)*/
        [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab]
    )
}

export default Detail;

구현한 화면은 아래와 같다.

선택한 Tab에 따라 해당하는 내용이 보여진다. 🙂

이번 포스팅에서는 리액트에서 외부 라이브러리인 axios로 Ajax를 요청하는 방법에 대해 알아보고, 이를 활용하여 상품 더보기 버튼을 만들어 볼 것이다. ajax에 대한 자세한 설명은 아래 글을 참고하자.

✨ Ajax 자세히 알기 ✨

👀 Axios란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

설치 방법

npm install axios

터미널에 위 코드를 작성하면 설치 끝이다. 이제 프로젝트 상단에 import 해 주자.

import axios from 'axios';

사용 방법

GET

axios.get('url') // 요청 한 개

Promise.all([axios.get('url1'), axios.get('url2')]).then(()=>{}) // 동시에 ajax 요청 여러 개 할 때

POST

axios.post('url', [전송할 데이터])

🙆‍♀️ 더보기 버튼 만들기

App.js

...

import axios from 'axios';

function App() {

  let [shoes, setShoes] = useState(data);

  return (
    <div className="App">

    ...

      <button onClick={()=>{
        axios.get('https://codingapple1.github.io/shop/data2.json')
        .then((result)=>{

          console.log(result.data)
          console.log(shoes) // 받아 오는 데이터의 형태가 어떤지 콘솔창에 출력해 보기

          let copy = [...shoes, ...result.data]; // 기존 배열과 새로 받아 온 데이터의 배열을 합침!
          setShoes(copy);
        })
      }}>더보기</button>

    </div>
  );
}

...

구현 화면은 아래와 같다.

더보기 버튼 클릭 시 axios로 받아 온 새 신발들이 목록에 나타난다. 😎

이번 포스팅에서는 리액트의 Lifecycle과 useEffect에 대해 알아보고, 이것을 활용하여 쇼핑몰 알림창을 구현해 볼 것이다.

🥑 Lifecycle

먼저 Lifecycle이란 무엇일까?

컴포넌트는 생성이 될 수도 있고, 재렌더링(업데이트)이 될 수도 있으며, 필요가 없을 때는 삭제가 되기도 한다. 이처럼 컴포넌트는 생명 주기, 즉 Lifecycle을 가지고 있다. 이때 생성되는 것을 mount, 재렌더링 되는 것을 update, 제거되는 것을 unmount라고 한다.

장점

이 Lifecycle을 알고 있으면 각각의 상황에서 원하는 기능을 개발하는 것이 수월해진다. 컴포넌트의 생명 주기에 따라 필요한 코드를 hook 해 주면 되기 때문이다.

또한 Lifecycle은 코드의 실행 시점을 조절할 수 있기 때문에 반복 연산, 서버에서 데이터를 가져오는 작업, 타이머 등 시간이 오래 걸리는 작업 수행 시 useEffect를 사용하면 조금이라도 html 렌더링 속도를 높일 수 있다는 장점이 있다! 🙂

사용 방법

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    // 컴포넌트 로드 & 업데이트될 때마다 실행할 코드
  });

  return (생략)
}

Lifecycle hook 기본 문법은 이와 같다. 컴포넌트가 로드 또는 업데이트 될 때마다 실행할 코드를 useEffect안에 작성해 준다. 그러면 html 렌더링 이후에 이 코드가 동작하게 된다.

useEffect에 넣을 수 있는 실행 조건들이 있는데. 아래에 간단히 정리해 보았다.

1. 재렌더링마다 코드 실행

useEffect(()=>{실행할 코드})

2. mount 시 1회 코드 실행

useEffect(()=>{실행할 코드}, [])

3. unmount 시 1회 코드 실행

useEffect(()=>{ 
  return ()=>{
    실행할 코드
  }
}, [])

4. useEffect 실행 전 실행

useEffect(()=>{ 
  return ()=>{
    실행할 코드
  }
})

5. 특정 state 변경 시에만 실행

useEffect(()=>{ 
  실행할 코드
}, [state1])

이 개념들을 머릿속에 넣고 이제 프로젝트로 돌아가 보자!

🍇 코드로 살펴보기

detail.js

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function Detail(props) {

  ...

    let [alert, setAlert] = useState(true);

    useEffect(()=>{
        let a = setTimeout(()=>{setAlert(false)}, 2000)
        return ()=>{
            clearTimeout(a)
        }
    },[])

    return (
        <div className="container">
            {
                alert == true ?
                <div className="alert alert-warning">
                        2초 이내 구매 시 할인!
                </div>
                : null
            }

            ...

        </div>
    )
}

export default Detail;

구현 화면은 아래와 같다.

처음 페이지에 접속하면 타이머 시간으로 설정해 놓은 2초 동안 알림창이 나타났다가 시간이 지나면 사라진다. 이처럼 Lifecycle과 useEffect를 활용하여 다양한 기능을 구현해 볼 수 있다. 👏