[javascript] Svelte에서 부모-자식 컴포넌트 간의 통신 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, 자식 컴포넌트에서 속성(props)을 정의하고 부모 컴포넌트에서 값을 전달하면 됩니다. 자식 컴포넌트는 받은 값을 원하는 방식으로 사용할 수 있습니다.

자식 컴포넌트 예시:

<script>
  export let message;
</script>

<div>{message}</div>

부모 컴포넌트에서 자식 컴포넌트를 사용하고 속성을 전달하는 예시:

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

  let parentMessage = 'Hello from parent';

  function updateParentMessage() {
    parentMessage = 'Updated message from parent';
  }
</script>

<button on:click={updateParentMessage}>Update Message</button>
<ChildComponent {message={parentMessage}} />

위의 예시에서는 parentMessage라는 변수를 가지고 있고, 버튼을 클릭하면 updateParentMessage 함수가 호출되어 parentMessage의 값을 업데이트합니다. 그리고 ChildComponent를 사용하고 있고, message 속성에 parentMessage 값을 전달하고 있습니다.

또한, 자식 컴포넌트에서 이벤트(custom event)를 발생시켜 부모 컴포넌트가 이를 감지하고 처리할 수도 있습니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트에게 명령을 내리거나 상태를 변경할 수 있습니다.

자식 컴포넌트에서 이벤트를 발생시키는 예시:

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

  const dispatch = createEventDispatcher();

  function sendMessage() {
    dispatch('message', { text: 'Hello from child' });
  }
</script>

<button on:click={sendMessage}>Send Message</button>

부모 컴포넌트에서 이벤트를 감지하고 처리하는 예시:

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

  let receivedMessage = '';

  function handleMessage(event) {
    receivedMessage = event.detail.text;
  }
</script>

<p>Received Message: {receivedMessage}</p>
<ChildComponent on:message={handleMessage} />

위의 예시에서는 자식 컴포넌트에서 sendMessage 함수를 통해 message 이벤트를 발생시키고 있고, 부모 컴포넌트에서는 handleMessage 함수를 통해 이벤트를 감지하고 receivedMessage 변수의 값을 업데이트합니다.

이렇게하면 부모-자식 컴포넌트 간의 효과적인 통신을 구현할 수 있습니다. Svelte 공식 문서에서 더 자세한 내용을 확인할 수 있습니다: https://svelte.dev/docs#Child_component_events