svelte - 3. component, props

svelte의 레고블록

가져다..씁니다.

• Component : 파일로 분리된 지정된 부분을 가져와 씁니다

• Props : 컴포넌트간 통신 방법 (단방향)

1) 컴포넌트에 {} 대골호를 입력하고 상태값을 작성하여 데이터를 넘길 수 있음

2) 받는 쪽에선 export let 변수 로 값을 사용할 수 있음

기존 클릭 카운트 파일을 컴포넌트로 분리해서 구성 : 결과는 같으나 쪼개진 구성 (props 로 데이터 넘김)

• App.svelte

<script>
// component로 분리해본다
import Count from './components/Count.svelte';
import ClickCountBtn from './components/ClickCountBtn.svelte';

let count = 0;
$: doubled = count * 2;   // 반응성 기호로 선언 > 값이 변경 시 이를 감지

function handleClick() {
  count += 1;
}


</script>

<Count { count } { doubled} />
<ClickCountBtn { count } { handleClick }/>

• Count.svelte

<script>
export let count;
export let doubled;

$: {
  console.log( "[count component]" + count );
  console.log( "[count component]" + doubled ); 
}


</script>

<p> DOUBLED : {doubled} ( { count } 의 두배) </p> >

• ClickCountBtn.svelte

<script>
export let count;
export let handleClick;

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

<button on:click={handleClick}>
 CLICK COUNT : {count} <CountLabel { count } />
</button>

• CountLabel.svelte

<script>
export let count;
</script>

{ count > 1 ? 'times' : 'time' }