[Svelte] props 사용하는 방법

안녕하세요. J4J입니다.

 

이번 포스팅은 props 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

부모 → 자식 props 전달

 

부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 방법은 다른 SPA 기술들과 유사하게 사용됩니다.

 

다만 제가 공부해왔던 react랑 비교해 봤을 때 차이점을 가지는 것은 다음과 같습니다.

 

• 부모와 자식에서 사용되는 변수 이름이 동일할 경우 일부 생략하여 작성 가능
• 자식이 props를 전달받는 방법은 export를 사용

 

 

 

위의 차이점을 생각하며 다음 예시 코드를 확인해보겠습니다.

 

우선 App.svelte파일에 다음과 같이 코드를 작성하겠습니다.

 

<script>
	import Child from './Child.svelte';
	
	let name = '';
	let age = '';
</script>

<main>
	<input type="text" bind:value={name} /> <!-- 양방향 바인딩 -->
	<input type="number" bind:value={age} /> <!-- 양방향 바인딩 -->

	<Child name={name} age={age} otherName={name} /> <!-- child의 변수 명 = 부모의 변수 명 -->
	<Child {name} {age} otherName={name}/> <!-- 변수 명이 동일한 경우 생략 가능 -->
</main>

 

 

반응형

 

 

그리고 App.svelte와 동일한 경로에 Child.svelte를 생성하여 다음과 같이 코드를 작성해보겠습니다.

 

<script>
    export let name; // name으로 전달받은 props 저장
    export let age; // age로 전달받은 props 저장
    export let otherName; // otherName으로 전달받은 props 저장
</script>

<div class="box">
    <h2>name: {name}</h2>
    <h2>age: {age}</h2>
    <h2>otherName: {otherName}</h2>
</div>

<style>
    .box {
        border-bottom: 1px solid black;
        margin-bottom: 100px;
    }
</style>

 

 

 

코드를 확인해보시면 위에서 말씀드린 차이점이 무엇인지 어느 정도 보이실 겁니다.

 

먼저, 첫 번째 항목이었던 생략은 App.svelte파일에서 확인 가능합니다.

 

일반적으로 props를 전달할 때 "name={name}"과 같은 방식으로 전달하는데 부모, 자식 간에 사용되는 변수 명이 동일할 경우 "{name}"으로 생략해서 작성할 수가 있습니다.

 

하지만 "otherName={name}"과 같이 변수 명이 다를 경우는 생략이 불가합니다.

 

 

 

두 번째 항목이었던 props 전달받는 방법은 Child.svelte파일에서 확인이 가능합니다.

 

export라는 키워드를 사용하여 name, age, otherName를 변수로 각각 선언해주면 바로 사용이 가능해집니다.

 

 

 

그 결과로 input에 값을 입력할 경우 다음과 같이 props전달이 정상적으로 이루어지고 있는 것을 확인할 수 있습니다.

 

실행 결과

 

 

 

자식 → 부모 props 전달

 

제가 알던 props전달은 부모에서 자식에게만 전달이 가능한 것으로 알고 있습니다.

 

그렇기 때문에 당연히 react를 이용하여 개발할 때도 부모에서 자식에게만 props를 전달해왔고 자식이 가지고 있는 데이터를 부모가 확인하기 위해서는 상태 관리를 사용하는 등의 행동을 취했었습니다.

 

하지만 svelte에서는 부모에서 자식에게 props를 전달하는 것과 유사한 방법으로 자식이 부모에게 props를 전달해줄 수 있는 기능이 있습니다.

 

관련된 예시 코드를 보여드리겠습니다.

 

 

 

우선 App.svelte파일을 다음과 같이 수정하겠습니다.

 

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

	let name = '';
	let age = '';

	const childProps = (e) => {
		// 전달받은 데이터는 e.detail에 저장되어 있음
		name = e.detail.name;
		age = e.detail.age;
	}
</script>

<main>
	<Child on:childProps={childProps} /> <!-- on:자식의 dispatch 이름={처리할 부모의 메서드 이름}  -->

	<div class="box">
		<h2>name: {name}</h2>
		<h2>age: {age}</h2>
	</div>
</main>

<style>
    .box {
        border-bottom: 1px solid black;
        margin-bottom: 100px;
    }
</style>

 

 

728x90

 

 

그리고 Child.svelte파일도 다음과 같이 수정하겠습니다.

 

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

    const dispatch = createEventDispatcher();

    let name = '';
    let age = '';

    // 함수에서 사용되는 변수들(name, age)이 변경될 때마다 실행 (반응성)
    $: (() => {
        // childProps로 name과 age를 전달
        dispatch('childProps', {
            name, // 이름이 동일해서 name: name,을 name,으로 변경
            age // 이름이 동일해서 age: age를 age로 변경
        })
    })();
</script>

<div>
    <input type="text" bind:value={name} /> <!-- 양방향 바인딩 -->
    <input type="number" bind:value={age} /> <!-- 양방향 바인딩 -->
</div>

 

 

 

위의 코드에서 자식에서 부모로 props를 전달하는 방법은 다음과 같습니다.

 

• 자식에서 input값을 입력할 때마다 $로 정의해둔 함수가 실행
• dispatch를 이용하여 childProps로 자식의 name과 age를 전달
• 부모에서 정의해둔 childProps에 연결되는 함수가 실행
• 함수가 실행되며 부모의 name, age를 업데이트

 

 

 

코드의 실행결과는 다음과 같이 정상적으로 입력값들이 보여집니다.

 

실행 결과

 

 

 

사실... 부모 컴포넌트에서 name과 age를 받아오는 함수를 생성해서 자식에게 넘겨주는 것과 유사한 방식이라고 생각되기는 합니다.

 

아직 깊게 사용해보진 않아서 정확히 어떨지는 모르겠지만 개인적으로 보다 더 편하게 개발하게 도와주지 않을까 생각하는 기능입니다.

 

 

 

 

 

 

이상으로 props 사용하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.