https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Svelte는 프론트 엔드 웹 앱 개발을 위한 떠오르는 프론트 엔드 프레임워크입니다.

사용이 간편하고 결과를 빠르게 생성할 수 있습니다.

이 기사에서는 props를 통해 자식 Svelte 구성 요소에 데이터를 전달하는 방법을 살펴보겠습니다.

소품

export 키워드를 사용하여 자식 구성 요소 자체 내에서 자식에게 전달할 수 있는 변수를 만들 수 있습니다.

예를 들어 App.svelte가 부모이고 Button.svelte가 자식이면 다음을 작성하여 text의 Button prop에 값을 전달할 수 있습니다.
App.svelte :

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

<main>  
  <Button text='Toggle' />  
</main>

Button.svelte :

<script>  
export let text;  
</script>

<button>  
  {text}  
</button>

위의 코드에서 다음과 같이 작성했습니다.

export let text;

Button가 text를 소품으로 사용함을 나타냅니다.

그런 다음 App.svelte 에서 다음과 같이 씁니다.

<Button text='Toggle' />

문자열 'Toggle'를 Button에 전달합니다. Button가 text 태그 사이에서 button를 참조하므로 Toggle이라는 단어가 버튼의 텍스트로 표시됩니다.

다음과 같이 export 표현식의 값을 설정하여 props의 기본값을 설정할 수 있습니다.
App.svelte :

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

<main>  
  <Button text='Toggle' />  
  <Button />  
</main>

Button.svelte :

<script>  
export let text = "Empty Button";  
</script>

<button>  
  {text}  
</button>

위의 코드에서 text 에서 'Empty Button' 를 Button.svelte 로 설정했습니다.

따라서 Button 소품이 전달되지 않은 text가 있는 경우 해당 값을 버튼 텍스트로 가져옵니다.

소품 펼치기

Spread 연산자를 사용하여 개체의 속성을 여러 props로 확산할 수 있습니다.

예를 들어, 하나 이상의 prop을 전달하려면 다음과 같이 작성할 수 있습니다.
App.svelte ;

<script>  
  import Info from "./Info.svelte"; 
  const person = {  
    name: "Jane Smith",  
    age: 20,  
    gender: "female"  
  };  
</script>

<main>  
  <Info {...person} />  
</main>

Info.svelte :

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

<p>{name} {age} {gender}</p>

위의 코드에서 우리는 person 에 App.svelte 객체를 가지고 있으며, 이것은 Spread 연산자를 통해 name , age 및 gender 소품으로 퍼집니다.
Info.svelte 에서 name , age , gender 가 소품임을 나타냅니다. App.svelte 에서 전달되었기 때문에 값이 p 태그에 표시됩니다.

그래서 우리는 화면에 Jane Smith 20 female가 있습니다.

반대로 export 로 명시적으로 선언되지 않은 props에 접근하려면 $$props 변수로 값을 얻을 수 있습니다.

예를 들어 위의 예를 다음과 같이 다시 작성할 수 있습니다.
App.svelte :

<script>  
  import Info from "./Info.svelte"; 
  const person = {  
    name: "Jane Smith",  
    age: 20,  
    gender: "female"  
  };  
</script>

<main>  
  <Info {...person} />  
</main>

Info.svelte :

<p>{$$props.name} {$$props.age} {$$props.gender}</p>

보시다시피 exports에서 모든 Info.svelte를 제거하고 템플릿 마크업에서 직접 참조$$props했습니다.

결론

export 표현식으로 props를 선언하여 부모 구성 요소에서 자식 구성 요소로 데이터를 전달할 수 있습니다.

그런 다음 부모에서 자식으로 소품을 전달할 수 있습니다.

전달하고자 하는 props가 많은 경우, spread 연산자를 사용하여 객체 속성을 props로 퍼뜨릴 수 있습니다.

마지막으로 $$props 변수를 사용하여 연관된 export 표현식이 없는 소품을 참조할 수 있습니다.