Svelte 정리 - 나만볼거임

Alpha, Orderly·2023년 4월 20일
svelte
0

Svelte

목록 보기
1/2

Svelte : 가벼운 / 날씬한 의 의미를 가진다.

Svelte는 프레임워크가 아닌 컴파일러이다, 최적화된 Pure js 파일을 만들어낸다.

프로젝트 시작하기

npx degit sveltejs/template 프로젝트이름

이후 npm install

프로젝트 실행하기

npm build : 빌드
npm dev : 개발 서버
npm start : 배포

유용한 라이브러리

rollup : 코드 변화 파악해 컴파일 새로해준다.

코드 예제

App.svelte

<script>
	export let name;
    // 파일 내에서 {name} 으로 쓰일수 있고, 외부에서 설정 가능하다 < export >
</script>

<style>
	h1 {
		color: purple;
	}
</style>

<h1>Hello {name.length}!</h1>

main.js

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
        // export 되어있던 name의 값을 설정
	}
});

export default app;

값 변경해보기

<script>
	let name = 'Woo';
	let age = 26;

// age를 1 늘려준다.
	function incrementAge() {
		age += 1;
	}
</script>

<style>
	h1 {
		color: purple;
	}
</style>

<h1>Hello {name}! My age is {age}</h1>
// 하단의 버튼을 클릭시 나이가 1씩 늘어난다.
<button on:click={incrementAge}>Change Age</button>

on:click 은 svelte 문법

기본 문법

{}

  • 이것을 통해 자바스크립트의 변수와 출력을 연결해줄수 있다.
  • 함수또한 가능하다.
  • svelte 컴파일러에게 script 부분을 확인하도록 하는것으로 작동한다, 이후 연결.

$:

  • Labeled statement
  • 동적으로 변수를 조작할수 있다.
<script>
	let name = 'Woo';
	let age = 26;

	$: uppercaseName = name.toUpperCase();
    $: console.log(name);
   	$: if(name === 'WooKyeongHoon') {
		console.log('Oh he is woo');
	}

	function incrementAge() {
		age += 1;
	}
</script>

uppercaseName의 경우 name의 값에 의해 동적으로 정해진다.
name이 바뀔때마다 새로 계산되는것
정확히는 재 계산 이후 렌더링이 새로 일어난다

  • 함수가 올수도 있다, 이 경우 함수가 참조하는 값이 변경될 시 새로 실행된다.
  • 자바스크립트 자체가 올수도 있다, 이 경우 또한 참조하는 값이 변경될시 실행된다.

+

  • on:input >> input 태그에서 값이 바뀌면 읽어옴, e.target.value 로 읽어온다.
  • bind:value >> value가 바뀌면 읽어올 뿐만 아니라 변수를 업데이트 하기도 한다.
  • *.svelte 파일을 추가해 컴포넌트를 만들수 있다.
  • <style></style> 을 통해 CSS 추가 가능하다.
  • import ContactCard from "./ContactCard.svelte"; 와 같이 import 한다.
  • 위와 같이 사용시 와 같이 사용 가능하다.
  • 변수에 export 를 붙혀 외부에서 사용시 값을 가져올수 있게 할수 있다.
  • <ContactCard userName="testing"/> 와 같이 제공할수 있다.
  • <p>{@html 변수}</p> : 변수를 html로서 읽어오게 할수 있다.

동적 클래스

  • class="{image ? 'thumb' : 'thumb-placeholder'}"
    클래스를 동적 지정 가능하다.
  • class:thumb-placeholder="{조건}" : 특정 조건이 맞을시 thumb-placeholder 클래스를 추가한다.

조건문

if

{#if (formState === 'done')}
<ContactCard />
{:else if (formState === 'invalid')}
<p>invalid card</p>
{/if}
  • if 조건에 맞아야만 내용을 렌더링 한다.
  • if 블록을 열고 닫는 과정이 포함된다.
  • {:else if (조건)} 으로 중간 조건 추가 가능
  • {:else} 도 가능

반복문

each

{#each createdContacts as createdContact}
  <ContactCard  userName={createdContact.name}/>
{/each}
  • {#each 배열 as 원소이름}
    • 배열의 값들을 원소 이름으로 loop 돈다.
  • svelte는 push / pop 등으로 일어난 배열의 변경을 확인할수 없다. >> 렌더링이 새로 일어나지 않음
    • push 말고 spread 같은것을 사용하면 된다.
  • {:else} 를 추가해 배열이 비었을때 경우를 추가할수 있다.
  • {#each createdContacts as createdContact, index}
    • 위와 같은 방식으로 index도 가져올수 있다.

key

  • 반복되는 대상을 구분하는 방법
    {#each createdContacts as createdContact, index (createdContact.id)}
  • each 문의 마지막 부분에 소괄호를 이용해 적는다.
  • 각각의 아이템에 대해 unique 해야 한다.

배열 업데이트 하기

  • 배열은 자바스크립트에서 레퍼런스 타입이기 때문에, = 를 통해 업데이트 된 배열로 새로 대입해야 한다.

이벤트 모디파이어

한번만 작동하는 이벤트

  • on:click|once > 한번만 작동하는 click

  • on:click|preventDefault > 기본동작 방지

Public HTML 파일 이용해 컴포넌트 표시하기

  1. public/index.html의 body를 아래와 같이 수정한다.
  <body>
	<div id="Header"></div>
	<div id="App"></div>
  </body>
  1. main.js 를 아래와 같이 수정해 각각의 id에 inject 하면 된다.
  import App from './App.svelte';
  import Header from './UI/Header.svelte';

  const app = new App({
      target: document.querySelector('#App')
  });

  const header = new Header({
      target: document.querySelector('#Header')
  })

  export default app;
  • 이렇게 사용시, Header과 App 컴포넌트간 상호작용이 이루어지기 쉽지 않다.

이벤트 포워딩

  • 컴포넌트에 on:click 으로만 사용하면, 이를 불러올때 <Component on:click={...} /> 과 같이 사용 가능
  • 컴포넌트
  • 메인

이벤트 전달

  • 자식 컴포넌트에 아래와 같이 dispatcher 구성

    import { createEventDispatcher } from "svelte";

const dispatch = createEventDispatcher();

const sendEvent = () => {
  dispatch("buttonClick", "Hello");
}

  • dispatch의 첫번째 값은 이벤트의 이름, 두번째 값은 이벤트 핸들러 함수에 전달할 값을 넣는다.

  <script>
  import ChildComponent from "./Child.svelte";

  const handleButtonClick = event => {
    console.log(event.detail);
  }
</script>

<div>
  <ChildComponent on:buttonClick={handleButtonClick}/>
</div>
  • 부모 컴포넌트에서는 위와 같이 사용, 설정해둔 값은 event.detail에 저장된다.

Slot

  • 컴포넌트가 자식 요소를 가질수 있도록 한다.
  • 자식 요소에 아래와 같이 작성
  <!-- Box.svelte -->
<div class="box">
  <slot></slot>
</div>
  • 부모 요소에는 아래와 같이 사용한다.
<Box>
  <h2>Hello!</h2>
  <p>This is a box. It can contain anything.</p>
</Box>

  • 슬롯에 이름 붙히기

  • 자식 컴포넌트에 slot 넣을때 name 붙히기

    <!-- ContactCard.svelte -->
<article class="contact-card">
<h2>
  <slot name="name">
    <span class="missing">Unknown name</span>
  </slot>
</h2>

<div class="address">
  <slot name="address">
    <span class="missing">Unknown address</span>
  </slot>
</div>

<div class="email">
  <slot name="email">
    <span class="missing">Unknown email</span>
  </slot>
</div>
</article>

  • 부모 컴포넌트에서 사용할때 slot="이름" 을 자식에 넣어서 제공하기

    <ContactCard>
<span slot="name">
  P. Sherman
</span>

<span slot="address">
  42 Wallaby Way<br>
  Sydney
</span>
</ContactCard>

Slot prop

  • slot의 데이터를 상위 컴포넌트로 전달하는 방법
  • 자식 컴포넌트
  • 상위 컴포넌트에 전달할 값을 slot에 지정함
    <div on:mouseenter={enter} on:mouseleave={leave}>
<slot hovering={hovering}></slot>
</div>
  • 부모 컴포넌트
  • let:이름 통해 슬롯으로부터 값을 받아올수 있다.
    <Hoverable let:hovering={active}>
  • 받아온 active 값은 컴포넌트의 하위요소에만 사용할수 있다.

생성 생명주기

  • script 실행
  • onMount()
    • 데이터 가져오는걸 여기에 하는것이 좋다.
    • 컴포넌트가 DOM에 추가될 때 호출
    • DOM 요소 접근시에도 여기에서 한다.
<script>
	import { onMount } from 'svelte';

	let photos = [];

	onMount(async () => {
		const res = await fetch(`/tutorial/api/album`);
		photos = await res.json();
	});
</script>
  • afterUpdate()
    • 컴포넌트에서 변경된 값이 DOM에 반영된 후 호출되는 생명주기 함수

소멸 생명주기

  • onDestroy()
    • 컴포넌트가 DOM에서 제거될 때 호출됩니다.
<script>
	import { onDestroy } from 'svelte';

	let counter = 0;
	const interval = setInterval(() => counter += 1, 1000);

	onDestroy(() => clearInterval(interval));
</script>

업데이트 생명주기

  • beforeUpdate() - 업데이트 이전에 DOM 저장
    • 컴포넌트에서 변경된 값이 DOM에 반영되기 전에 호출되는 생명주기 함수입니다.
    • 추가 혹은 업데이트 전에 호출됩니다.
  • afterUpdate() - 업데이트에 따라 DOM/View를 업데이트
  • tick()
    • 컴포넌트의 변경된 값이 DOM에 반영 후 특정 로직이 실행되어야 하는 경우 tick() 함수를 사용합니다. 
      await tick(); // DOM 적용될 때까지 기다립니다.
profile
Alpha, Orderly
만능 컴덕후 겸 번지 팬
다음 포스트

Svelte 추가 사항

0개의 댓글