[Svelte]svelte 컴포넌트 및 구성요소

이번 포스팅에서는 svelte 컴포넌트 및 구성요소에 대해 설명합니다. svelte 파일은 상태와 특정 이벤트가 발생한 경우 로직을 정의하기 위해 JavaScript 코드를 작성하는 script, 상태 또는 버튼을 화면에 표시하기 위한 HTML, HTML을 꾸며주는 CSS로 구성됩니다.

---

svelte 컴포넌트의 구성요소

스벨트의 컴포넌트는 React와 달리 클래스나 함수 또는 객체 리터럴로 만들어지지 않으므로 React 개발자에게는 다소 생소할 수 있습니다. Angular, Vue, React와 같은 JavaScript 프레임워크를 사용하지 않고 고전적인 방법으로 웹 화면을 구현해봤던 경험이 있는 개발자에게는 Svelte가 친숙할 수 있겠네요.

 

아무튼 svelte 파일에는 위에서 언급했듯이 script, HTML, CSS로 구성됩니다. svelte 컴포넌트가 세 가지 요소를 전부 가져야 하는 것은 아니며, HTML 요소만 가질 수도 있습니다. 그리고 세 가지 요소의 작성 순서는 상관없습니다.

 

다음은 .svelte 파일의 기본 구조입니다.

<script>
  // 자바스크립트 코드는 script 태그 사이에 작성합니다.
  // 스크립트는 해당 컴포넌트에만 영향을 미칩니다.
  let name = 'world';
</script>

<!-- h1은 HTML 요소입니다. -->
<h1>Hello {name}!</h1>

<style>
  /* HTML 요소를 꾸미기 위한 CSS는 style 태그 사이에 작성합니다. */
  /* CSS는 해당 컴포넌트에만 적용됩니다. */
  h1 {
    color:#ff3e00;
  }
</style>

[실행 결과]

script 태그 내부에 작성된 JavaScript 코드와 style 태그 내부에 작성된 CSS는 해당 컴포넌트에만 영향을 미칩니다. 즉, App.svelte 파일에만 영향을 미칩니다.

Svelte • Cybernetically enhanced web apps

스벨트는 브라우저 기반의 REPL을 지원하므로 공식 사이트에서 간단한 애플리케이션을 구현하거나 코드를 작성할 수 있습니다.

공식 사이트 접속 후 상단의 REPL을 클릭하면 코드를 작성할 수 있습니다.

 

REPL이 무엇인지 궁금하시다면, 아래 포스팅을 확인해주세요.

REPL에 대해 알아보자

반응형

---

컴포넌트 마크업

컴포넌트 마크업은 쉽게 말해서 스벨트 컴포넌트에서 다른 스벨트 컴포넌트를 사용하는 것을 의미합니다. 다른 컴포넌트에 전달되는 데이터들을 Properties라고 말하며, 보통 Props를 전달한다고 말합니다.

 

즉, 스벨트 컴포넌트는 Props를 전달받을 수 있으며, 전달받은 값에 따라 로직을 작성할 수 있습니다. Props의 값은 숫자, 문자열, 객채, 배열, 함수 등 JavaScript에서 사용되는 모든 타입이 될 수도 있고 JavaScript 표현식이 될 수도 있습니다.

 

Props에 대한 내용은 추후 포스팅할 예정이며, 지금은 "컴포넌트에 전달되는 데이터"라고 이해하면 되겠습니다.

 

다음 예제는 App라는 스벨트 컴포넌트에서 Child 컴포넌트에 Props를 전달합니다.

[App.svelte]

<script>
  // Child 컴포넌트를 불러옵니다.
  import Child from './Child.svelte';
</script>

<!-- Child 컴포넌트의 value에 문자열 'Hello'를 Props로 전달합니다. -->
<Child value={'Hello'}/>

[Child.svelte]

<script>
  // Child 컴포넌트의 value를 외부 컴포넌트에서 사용할 수 있도록 합니다.
  export let value;
</script>

<p>{value}</p>

---

컴포넌트 이름

스벨트의 컴포넌트를 정의할 때는 파일 이름만 정의하므로 컴포넌트 이름이 존재하지 않습니다.

 

반대로 React의 컴포넌트를 함수 또는 클래스로 정의할 때, 이름을 명시하므로 컴포넌트의 이름이 존재합니다.

import React from 'react';

export default class Child extends React.Component {
  return <h1>ChildComponent</h1>;
}

 

스벨트는 컴포넌트 이름이 존재하지 않으므로 파일을 불러올 때, 컴포넌트의 이름을 명시합니다. 다음 예제는 App 컴포넌트에서 Child.svelte 파일을 불러옵니다.

[App.svelte]

<script>
  // Child.svelte를 Child로 명명합니다.
  import Child from './Child.svelte';
</script>

<!-- Child 컴포넌트의 value에 문자열 'Hello'를 Props로 전달합니다. -->
<Child value={'Hello'}/>

위 예제처럼 파일이름과 컴포넌트 이름을 동일하게 표기해도 되고 다음 예제처럼 다르게 표기해도 상관없습니다. 

<script>
  // Child.svelte를 Hello로 명명합니다.
  import Hello from './Child.svelte';
</script>

<!-- Hello 컴포넌트의 value에 문자열 'Hello'를 Props로 전달합니다. -->
<Hello value={'Hello'}/>

즉, .svelte 파일을 불러오는 경우 컴포넌트 이름을 명시합니다.