Svelte 컴포넌트의 생명주기 완전 이해하기! 언제, 왜 쓰는지 다 알려드릴게요! 🌱

이번에는 Svelte 컴포넌트의 생명주기(Lifecycle) 함수인 onMount, onDestroy, beforeUpdate, afterUpdate에 대해 설명드릴게요. 이 함수들이 언제, 왜 필요한지와 메모리 관리와 관련된 내용까지 자세히 다뤄볼게요. 😊

1. 컴포넌트 생명주기란?

Svelte의 컴포넌트 생명주기(Lifecycle)는 컴포넌트가 생성되고 나서 화면에 나타나기까지, 또 사라지기까지 거치는 여러 단계들을 말해요. onMount, onDestroy, beforeUpdate, afterUpdate 같은 생명주기 함수들은 각각 특정 시점에서 자동으로 호출되어, 개발자가 컴포넌트의 상태나 DOM 요소들을 효과적으로 제어할 수 있게 도와줘요. 중요한 건, 이 함수들은 우리가 직접 호출하지 않아도 Svelte가 알아서 실행해준다는 점이에요!

2. 생명주기 함수별 설명 및 예시

2-1. onMount – DOM이 렌더링된 후 호출

onMount는 컴포넌트가 처음 화면에 그려지고 나서(DOM이 렌더링된 후) 호출돼요. 이 시점에선 모든 DOM 요소가 준비된 상태라, 초기화 작업을 여기서 진행하면 좋습니다. 예를 들어, API 호출이나 외부 라이브러리를 초기화할 때 유용해요.

<script>
    import { onMount } from 'svelte';

    onMount(() => {
        console.log('컴포넌트가 마운트되었습니다!');
        // DOM이 다 준비된 후 실행되는 코드
    });
</script>

<div>컴포넌트가 화면에 렌더링되었어요!</div>

2-2. onDestroy – 컴포넌트가 사라지기 전에 호출

onDestroy는 컴포넌트가 사라지기 직전에 호출돼요. 주로 이벤트 리스너 해제나 타이머 정리와 같은 메모리 관리 작업을 할 때 사용합니다. 만약 이런 정리 작업을 해주지 않으면, 메모리가 계속 남아있게 되어 메모리 누수(memory leak)가 발생할 수 있어요.

<script>
    import { onDestroy } from 'svelte';

    let interval;

    onMount(() => {
        interval = setInterval(() => {
            console.log('타이머 실행 중...');
        }, 1000);
    });

    onDestroy(() => {
        clearInterval(interval); // 메모리 해제를 위해 타이머 정리
        console.log('컴포넌트가 파괴되었습니다.');
    });
</script>

<div>컴포넌트가 렌더링되었습니다.</div>

2-3. beforeUpdate – DOM 업데이트 전에 호출

beforeUpdate는 컴포넌트가 업데이트되기 직전에 호출돼요. 데이터가 변경되거나, 컴포넌트 상태가 변해서 화면이 다시 그려지기 전에 뭔가 작업이 필요할 때 사용할 수 있습니다.

<script>
    import { beforeUpdate } from 'svelte';

    let count = 0;

    beforeUpdate(() => {
        console.log(`DOM 업데이트 직전! 현재 count: ${count}`);
    });

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

<button on:click={increment}>카운트 증가</button>
<p>현재 카운트: {count}</p>

2-4. afterUpdate – DOM 업데이트 후 호출

afterUpdate는 컴포넌트가 업데이트된 후(DOM이 변경된 후) 호출돼요. 이 함수는 데이터가 변경된 후 DOM이 실제로 변경되었는지 확인하고 나서 뭔가 작업이 필요할 때 사용할 수 있어요.

<script>
    import { afterUpdate } from 'svelte';

    let count = 0;

    afterUpdate(() => {
        console.log(`DOM 업데이트 후! 현재 count: ${count}`);
    });

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

<button on:click={increment}>카운트 증가</button>
<p>현재 카운트: {count}</p>

3. 생명주기 함수들이 중요한 이유

왜 생명주기 함수들을 사용해야 하나요?

이 생명주기 함수들은 컴포넌트의 특정 상태나 DOM이 특정 시점에서 어떻게 변화하는지를 정확하게 파악할 수 있게 도와줘요. 이를 통해 필요한 초기화나 정리 작업을 적절한 시점에 처리할 수 있어요. 예를 들어, onDestroy에서 정리를 하지 않으면 메모리 누수가 발생할 수 있고, 이로 인해 앱의 성능 저하나 브라우저의 메모리 과부하가 일어날 수 있습니다.

안 해주면 어떻게 될까요?

생명주기 함수들을 사용하지 않고 컴포넌트 내에서 리소스 정리나 초기화를 제대로 해주지 않으면, 메모리가 계속 사용된 채 남아있을 수 있어요. 특히 이벤트 리스너나 타이머를 제거하지 않으면 불필요한 메모리 사용으로 이어지게 됩니다. 이로 인해 앱이 느려지거나, 브라우저가 다운되는 등의 문제가 발생할 수 있어요.

4. 헷갈리지 마세요! ⭐

• 생명주기 함수들은 자동으로 호출되니까, 직접 호출하려고 하지 않아도 됩니다.
• onDestroy에서 꼭 리소스를 정리하지 않으면 메모리 누수가 발생할 수 있어요. 특히, 이벤트 리스너나 타이머를 사용하는 경우엔 꼭 정리해줘야 해요!