[Docs] import 사용하기

Svelte홈페이지의 REPL탭에서 간단하게 import를 연습해보자

Svelte홈페이지의 REPL탭에 대해서 모르겠다면??

2022.06.12 - [Svelte] - [Step 01.] Svelte홈페이지에서 REPL사용하기

우선 App.svelte 컴포넌트 옆에 'Name.svelte'컴포넌트를 생성해서 내용을 입력해보자

import 대상인 Name.svelte를 생성하고 내용을 입력하였다.

이름을 입력한 컴포넌트 Name.svelte를 생성하였다.
이제 이 컴포넌트를 App.svelte에서 import를 통하여 불러올 것이다.

Svelte에서 import하는 방식은 아래와 같다. (정말 간단한 코드를 입력하는 것만으로 다른 컴포넌트를 불러올 수 있다. )

<script>
	import (컴포넌트 이름) from '컴포넌트 경로';
</script>

 

입력 예시)

 

불러온 컴포넌트는 단태그 혹은 쌍태그로 태그이름으로 입력하여 호출할 수 있다.

단태그 방식을 이용  : <컴포넌트 이름/> 으로 입력하며, 해당 컴포넌트를 수정없이 사용할 때 활용한다.
쌍태그 방식을 이용 : <컴포넌트 이름></컴포넌트 이름> 으로 입력하며, 컴포넌트에 내용을 추가하거나 수정하는 경우 활용한다.

 

App.svelte에서 Name.svelte를 import하여 활용한 예시)

Name.svelte를 &nbsp;App.svelte에 import하여 사용한 예시

Name이라는 컴포넌트 이름을 사용하여 태그를 입력한 결과 Name.svelte에서 작성하였던 내용이 App.svelte에 적용된 것을 볼 수 있다.