Svelte에서 구성 요소를 만드는 방법

지난 기사에서 how to make your first Svelte application using SvelteKit을 살펴보았습니다. 오늘 우리는 다음 단계인 구성 요소를 만드는 방법을 살펴보고 실제 Svelte 애플리케이션 구축을 시작할 수 있습니다.

구성 요소는 무엇이며 왜 필요한가요?

구성 요소는 모든 최신 프런트엔드 프레임워크의 공통 주제입니다. 본질적으로 점점 더 복잡한 애플리케이션을 구축하기 시작하면서 우리는 항상 동일한 유형의 것을 재사용하고 있음을 발견했습니다. 예를 들어, 등록 양식은 여러 다른 위치에 나타날 수 있으며 정확히 동일한 코드를 사용할 수 있습니다.

구성 요소는 궁극적으로 해당 문제를 해결하려고 합니다. 우리는 이러한 재사용 가능한 코드 조각을 생성하고 표시하려는 위치에 포함합니다. 그렇게 하면 코드를 한 번만 작성하고 원하는 곳에 배치할 수 있습니다. 구성 요소는 Svelte에서 사용자 지정 HTML 태그처럼 작동하며 표시하려는 모든 위치에 추가할 수 있습니다.

Svelte에서 컴포넌트를 만드는 방법

시작하기 전에 set up a new Svelte project using SvelteKit을 확인하십시오. SvelteKit에는 모든 Svelte 애플리케이션 페이지가 포함된 route라는 폴더가 이미 있습니다. 작업을 시작하려면 구성 요소라는 src에 새 폴더를 만드십시오. 모든 구성 요소를 여기에 저장합니다.

새 파일을 만들고 이름을 지정합니다MyFirstComponent.svelte. 이것은 첫 번째 Svelte 구성 요소 역할을 합니다. 지난 튜토리얼을 따라했다면 이제 폴더 구조가 다음과 같이 보일 것입니다.

static                   <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png           <-- our favicon
tests                    <-- a folder to store our tests
|- test.js               <-- an example test using @playwright
src                      <-- our main Svelte app files
|- routes                <-- a folder to store all of our routes in
|- components            <-- a folder for all of our components
|-- MyFirstComponent.vue <-- our first component
|-- index.svelte         <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts              <-- our core Svelte app file
|- app.html              <-- our main index file where the app will appear
.gitignore               <-- files we wish to ignore for git
.npmrc                   <-- config file for npm
.prettierrc              <-- config file for prettier
.eslintrc.cjs            <-- config file for eslint
package.json             <-- our NPM installed packages
playwright.config.js     <-- config file for playwright
svelte.config.js         <-- config file for svelte itself
tsconfig.json            <-- config file for typescript

좋습니다. 이제 파일이 생겼으니 첫 번째 구성 요소를 만드는 작업을 시작하겠습니다.

Svelte 구성 요소 만들기

이 가이드에서는 미리 설정된 기본값을 가질 수 있는 간단한 카운터 구성 요소를 만들 것입니다. Svelte의 좋은 점은 파일이 일반 CSS, HTML 및 Javascript 코드와 똑같이 보이고 느껴진다는 것입니다.

따라서 간단한 카운터를 만들기 위해 다음과 같이 시작합니다.

<script>
    // we write export let to say that this is a property
    // that means we can change it later!
    export let x = 0;
    const addToCounter = function() {
        ++x;
    }
</script>

<button id="counter" on:click="{addToCounter}">{x}</button>

<style>
    button {
        background: #ffb334;
        border-radius: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        padding: 0.5rem 2rem;
        color: white;
        font-size: 1.5rem;
    }
</style>

Svelte는 다른 프레임워크와 매우 유사하게 작동하지만 제 생각에는 구성 요소 코드가 크게 단순화되었습니다.

클릭 이벤트

위에서 우리는 단순히 하나의 이벤트인 클릭을 추가했으며 on:event={functionName} 구문을 사용하여 모든 DOM 요소에 이벤트를 추가할 수 있습니다. 위에서 on:click={addToCounter}를 추가하여 누군가가 버튼을 클릭할 때마다 실행addToCounter()할 것임을 나타냅니다.

속성

이동 HTML에는 속성 또는 소품이 있습니다. 예를 들어 <a> 태그의 href 속성을 설정하여 링크를 설정할 수 있습니다. Svelte에서 사용자 지정 소품을 생성하려면 export 키워드를 사용하여 구성 요소의 Javascript에 추가합니다.

export let x = 0;

즉, 사용할 때 소품으로 사용할 수 있습니다. Svelte 프로젝트에서 이를 구현하는 방법을 살펴보겠습니다.

Svelte에서 구성 요소 사용

이제 기본 구성 요소를 만들었으므로 원하는 위치에 추가할 수 있습니다. route/index.svelte에 추가해 봅시다. 다음과 같이 새 구성 요소를 가져와 사용할 수 있습니다.

<script>
    import MyFirstComponent from "../components/MyFirstComponent.svelte";
</script>

<MyFirstComponent />

SvelteKit을 사용하여 Svelte에서 카운터 구성 요소 만들기
이제 우리는 애플리케이션 어디에나 추가할 수 있는 간단한 카운터를 갖게 되었습니다. 더 좋은 점은 addToCounter 번호를 구성 요소의 소품으로 정의했기 때문에 기본값을 변경할 수 있다는 것입니다.

<MyFirstComponent x={5} />

이제 구성 요소는 0이 아닌 첫 번째 값으로 5를 표시합니다!

그것을 테스트

원본 자습서를 기반으로 Svelte 애플리케이션을 만든 경우 이제 터미널에서 다음 명령을 실행하여 구성 요소를 테스트할 수 있습니다.

npm run dev

이제 http://localhost:3000 에서 사용할 수 있는 코드의 dev 인스턴스를 갖게 됩니다.

결론

Svelte 애플리케이션 및 새 구성 요소를 만드는 것은 쉽고 Svelte는 HTML, CSS 및 Javascript만 사용하는 것이 아니라는 사실조차 깨닫지 못할 정도로 가벼운 언어입니다. Svelte 구성 요소에 대한 간략한 소개가 마음에 드셨기를 바랍니다. 더 많은 정보를 기대해 주세요Svelte content .