스벨트(Svelte)에서 Props 이해하기!

안녕하세요, 여러분! 👋 오늘은 스벨트(Svelte)에서 Props, 즉 properties에 대해 알아보려고 해요. Props는 부모 컴포넌트가 자손 컴포넌트에 전달하는 데이터로, 컴포넌트 간의 소통을 쉽게 만들어줍니다. 그럼 Props의 기본적인 사용법과 활용 방법을 깊이 있게 살펴볼까요? 😊

1. Props란?

Props는 부모 컴포넌트에서 자손 컴포넌트로 데이터나 값을 전달할 때 사용하는 특별한 속성입니다. 이를 통해 재사용 가능한 컴포넌트를 만들 수 있고, 데이터 흐름을 관리하는 데에도 큰 도움이 됩니다.

2. Props 기본 사용법

먼저, Props를 사용하는 기본적인 방법을 알아보겠습니다. 부모 컴포넌트인 App.svelte와 자손 컴포넌트인 Profile.svelte로 예제를 만들어 보겠습니다.

Profile.svelte

<script>
    // 자손 컴포넌트
    export let name;
    export let age;
    export let profession;
</script>

<h3>이름: {name}</h3>
<h3>나이: {age}</h3>
<h3>직업: {profession}</h3>
<hr>

App.svelte

<script>
    // 부모 컴포넌트
    import Profile from './Profile.svelte';
</script>

<Profile name="이준호" age={28} profession="개발자" />
<Profile name="김민지" age={25} profession="디자이너" />

여기서 부모 컴포넌트인 App.svelte는 Profile 컴포넌트를 사용하면서, 각각의 속성을 전달하고 있습니다. 각 프로필에서 이름, 나이, 직업이 제대로 표시됩니다! 🎉

3. 기본값 설정하기

Props를 전달하지 않으면 기본적으로 undefined로 처리됩니다. 이를 방지하기 위해, 자손 컴포넌트에서 기본값을 설정할 수 있습니다.

Profile.svelte

<script>
    // 자손 컴포넌트
    export let name = "홍길동";
    export let age = 30;
    export let profession = "무직";
</script>

<h3>이름: {name}</h3>
<h3>나이: {age}</h3>
<h3>직업: {profession}</h3>
<hr>

App.svelte

<script>
    // 부모 컴포넌트
    import Profile from './Profile.svelte';
</script>

<Profile name="박철수" />
<Profile />

이제 Profile 컴포넌트에서 값을 전달하지 않으면 기본값이 사용되어 “홍길동”, “30”, “무직”으로 출력됩니다. 👍

4. Props 데이터 변경하기

Props는 자손 컴포넌트에서는 직접 변경할 수 없지만, 부모 컴포넌트에서 값을 업데이트하고 다시 전달함으로써 반영할 수 있습니다. 아래는 버튼 클릭을 통해 나이를 증가시키는 예제입니다.

Profile.svelte

<script>
    export let name = "홍길동";
    export let age = 30;
    export let profession = "무직";
</script>

<h3>이름: {name}</h3>
<h3>나이: {age}</h3>
<h3>직업: {profession}</h3>
<hr>

App.svelte

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

    let userAge = 30;

    const increaseAge = () => {
        userAge++;
    }
</script>

<Profile name="박철수" age={userAge} profession="학생" />
<button on:click={increaseAge}>나이 증가</button>

위 코드에서는 버튼을 클릭할 때마다 userAge가 증가하며, Profile 컴포넌트에 전달된 나이가 실시간으로 업데이트됩니다! 🎈

5. Spread Props 사용하기

Svelte에서는 스프레드 오퍼레이터를 사용하여 여러 Props를 간단히 전달할 수 있습니다. 예를 들어, 다음과 같이 고객 정보를 담은 객체를 만들 수 있답니다.

Customer.svelte

<script>
    export let name;
    export let age;
    export let membership;
</script>

<h3>이름: {name}</h3>
<h3>나이: {age}</h3>
<h3>멤버십 등급: {membership}</h3>
<hr>

App.svelte

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

    const customerData1 = {
        name: '최민수',
        age: 35,
        membership: 'Gold'
    };

    const customerData2 = {
        name: '정은지',
        age: 29,
        membership: 'Silver'
    };
</script>

<Customer {...customerData1} />
<Customer {...customerData2} />

스프레드 연산자를 사용함으로써, Customer 컴포넌트에 여러 프로퍼티를 간략하게 전달할 수 있습니다. 🤗

 

이렇게 Props를 통해 스벨트에서 부모의 데이터와 자손 컴포넌트의 소통을 손쉽게 할 수 있습니다. Props를 적극적으로 활용하여 재사용 가능한 컴포넌트를 만들어 보세요! 🙌

오늘도 화이팅 !!✨