[Svelte]props 전달 방법

Props

React 및 Vue.js와 같은 다른 프레임워크에서도 사용되는 Props는 컴포넌트 간 데이터를 전달하는 방법 중 한 가지 방법으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 경우 사용됩니다.

 

이번 포스팅은 부모 컴포넌트인 App.svelte가 자식 컴포넌트인 Child.svelte에게 데이터를 props로 전달하는 방법을 살펴봅시다.

---

export 사용

부모 컴포넌트인 App.svelte는 import 키워드를 사용하여 자식 컴포넌트인 Child.svelte를 Child로 명시하였으며, script 영역에 선언된 변수 num을 Child 컴포넌트에 number라는 이름의 props로 전달합니다.

 

아래 소스 코드에서 알 수 있듯이 부모 컴포넌트에서 전달하는 props의 이름과 변수명은 동일하지 않아도 됩니다.

 

[부모 컴포넌트 - App.svelte]

<script>
  import Child from './Child.svelte';
  let num = 0;
</script>

<div>
  <button on:click={() => num++}>+</button>
  <button on:click={() => num--}>-</button>
  <Child number={num}/>
</div>

<style>
div {
  text-align: center;
}
</style>

다음은 자식 컴포넌트인 Child.svelte에서 부모 컴포넌트가 전달한 number라는 props를 사용하기 위해 script 영역 내부에 export 키워드로 선언합니다.

 

부모 컴포넌트에서 전달하는 props의 이름과 export 키워드로 선언되는 변수의 이름은 동일해야 합니다. 그리고 자식 컴포넌트에게 전달되는 props의 값이 부모 컴포넌트에서 변경될 수 있으므로 반드시 const가 아닌 let 키워드로 선언합니다.

 

[자식 컴포넌트 - Child.svelte]

<script>
  export let number;
</script>

<h1>{number}</h1>

[실행 결과]

---

props 기본값

다음 소스 코드는 부모 컴포넌트에서 값이 할당되지 않은 변수를 props로 전달합니다. 값이 할당되지 않은 props는 undefined로 설정됩니다.

 

[부모 컴포넌트 - App.svelte]

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

<div>
  <Child number={num}/>
</div>

[자식 컴포넌트 - Child.svelte]

<script>
  export let number;
</script>

<h1>{number}</h1>

[실행 결과]

undefined가 전달되는 것을 방지하기 위해 다음 두 가지 방법 중 하나를 사용할 수 있습니다.

1. 부모 컴포넌트에서 빈 값을 전달하지 않는다. - 비추천

2. 자식 컴포넌트에서 props에 기본값을 설정한다. - 추천

 

부모 컴포넌트에서 props로 전달되는 값의 타입이 symbol, 객체, 함수 등.. 다양한 타입이 될 수 있으므로 타입에 따라 값을 체크하는 것은 상당히 귀찮은 작업일 수도 있습니다.

 

따라서, 자식 컴포넌트에서 props의 기본값을 설정하는 것을 권장합니다.

 

다음 소스 코드는 자식 컴포넌트인 Child.svelte에서 number의 기본값을 10으로 설정합니다.

 

[자식 컴포넌트 - Child.svelte]

<script>
  export let number = 10;
</script>

<h1>{number}</h1>

---

객체를 props로 전달

props는 String, Number 타입뿐만 아니라 배열, 객체, 함수 등.. 다양한 타입이 될 수 있습니다. 다음 예제는 부모 컴포넌트에서 객체를 props로 전달합니다.

 

[부모 컴포넌트 - App.svelte]

<script>
  import Child from './Child.svelte'
  let person = {
    name: 'K-홍길동',
    age: 20
  };
</script>

<div>
  <Child person={person}/>
</div>

[자식 컴포넌트 - Child.svelte]

<script>
  export let person = {
    name: '', 
    age: 0
  };
</script>

<h1>{person.name}</h1>
<h1>{person.age}</h1>

[실행 결과]

---

객체를 props로 전달 - spread 연산자 활용

객체를 props로 전달하는 경우 자식 컴포넌트에서 점 표기법 또는 대괄호 표기법을 사용하여 객체의 프로퍼티를 접근해야 합니다. 큰 문제는 없으나 점 표기법 또는 대괄호 표기법을 타이핑하기 위해 키보드 자판기를 더 입력해야 하는 번거로움이 존재하죠.

 

이러한 번거로움을 피하기 위해 spread 연산자를 활용하여 객체를 props로 전달할 수 있습니다.

 

[부모 컴포넌트 - App.svelte]

<script>
  import Child from './Child.svelte'
  let person = {
    name: 'K-홍길동',
    age: 20
  };
</script>

<div>
  <Child {...person}/>
</div>

[자식 컴포넌트 - Child.svelte]

<script>
  export let name = '';
  export let age = 0;
</script>

<h1>{name}</h1>
<h1>{age}</h1>

---

정리

• props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.
• props에 전달되는 값이 할당되지 않았거나 존재하지 않으면 undefined를 전달합니다.
• 자식 컴포넌트에서는 props에 기본값을 설정함으로써 undefined를 방지할 수 있습니다.