props

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다.

다른 프렘이워크와 유사하게, 부모가 자식에게 값을 넘겨주고, 자식 컴포넌트는 이를 받아서 렌더링하거나 데이터를 처리할 수 있다.

사용방법은 다음과 같다.

1. 자식 컴포넌트에서 props 선언하기
   • 자식 컴포넌트는 전달받은 props를 export키워드를 사용해 선언할 수 있다.

<!-- Child.svelte -->
<script>
  export let name;  // 부모로부터 전달받은 props
</script>

<p>Hello, {name}!</p>

2. 부모 컴포넌트에서 props전달하기
   • 부모 컴포넌트는 자식 컴포넌트에 props를 할당해 데이터를 전달할 수 있다.

<!-- Parent.svelte -->
<script>
  let userName = 'Svelte Learner';
</script>

<Child name={userName} />

여기서 부모 컴포넌트는 name이라는 props를 Child컴포넌트로 전달하고, 자식 컴포넌트는 이를 받아서 화면에 표시한다.

만약 props가 전달되지 않으면 기본값을 설정할 수도 있다.

<script>
  export let name = 'Default User';
</script>

<p>Hello, {name}!</p>

이때, 부모 컴포넌트에서 props값을 변경하면 자식 컴포넌트도 자동으로 업데이트 된다. Svelte는 이 부분을 매우 반응적으로 동작한다.

함수 전달

Svelte에서 부모 컴포넌트에서 자식 컴포넌트로 함수를 전달할 수 있다.
함수와 함께 상태 데이터(props)도 넘길 수 있어서, 자식 컴포넌트에서 버튼을 클릭하면 부모 컴포넌트의 상태를 업데이트할 수 있다.

예를 들어, 부모 컴포넌트에서 age라는 값을 자식에게 전달하고, 자식 컴포넌트에서 버튼을 클릭하면 나이가 하나 증가하는 함수를 전달할 수 있다.

// 부모 컴포넌트 (Parent.svelte)
<script>
  let age = 25;

  // 나이를 증가시키는 함수
  function increaseAge() {
    age += 1;
  }
</script>

<!-- 자식 컴포넌트로 age와 increaseAge 함수를 props로 전달 -->
<Child age={age} onIncrease={increaseAge} />

<p>Current Age: {age}</p>

// 자식 컴포넌트 (Child.svelte)
<script>
  export let age;
  export let onIncrease;
</script>

<p>The age is: {age}</p>
<button on:click={onIncrease}>Increase Age</button>

• 부모 컴포넌트에서는 age라는 상태와 이를 증가시키는 increaseAge함수를 정의한다.
• 자식 컴포넌트에서는 age와 onIncrease라는 props를 받아와서 age를 화면에 표시하고, 버튼을 클릭 할 때 onIncrease함수를 호출한다.