Svelte에서 컴포넌트의 속성과 메소드에 접근하는 방법은 매우 간단하고 직관적입니다. 아래의 예제를 통해 이해해보겠습니다.

<script>
    export let name;
    
    function sayHello() {
        console.log(`Hello, ${name}!`);
    }
</script>

<main>
    <h1>Welcome to my website</h1>
    
    <button on:click={sayHello}>Say Hello</button>
</main>

이 예제에서 name 속성과 sayHello 메소드를 갖는 컴포넌트를 정의하였습니다.

name 속성은 export 키워드를 사용하여 외부로 노출시켰습니다. 이렇게 하면 부모 컴포넌트에서 이 값을 전달하여 사용할 수 있습니다.

sayHello 메소드는 function 키워드를 사용하여 정의되었습니다. 이 메소드는 버튼의 클릭 이벤트에 연결되어 있습니다. 그래서 이 버튼을 클릭하면 sayHello 메소드가 실행되고 콘솔에 “Hello, [name]!” 메시지가 출력됩니다.

따라서, 부모 컴포넌트에서 이 컴포넌트를 사용할 때 name 속성을 할당하고 버튼을 클릭하면 해당 메소드가 실행됩니다.

위 예제는 Svelte에서 컴포넌트의 속성과 메소드에 접근하는 기본적인 방법을 보여주고 있습니다. 보다 복잡한 상황에서는 다른 기능들을 활용하여 더 세밀하게 속성과 메소드를 다룰 수 있습니다. 자세한 내용은 Svelte 공식 문서를 참고해주시기 바랍니다.

참고 문서: Svelte 공식 문서