Svelte 맛보기 (라우팅 설정, param,query-string)

정지훈·2022년 6월 16일
0

Svelte 맛보기

Svelte는 react와 달리 가상 돔을 이용하지 않고 적은 코드로 페이지를 보여줄 수 있다고 메인화면에 나와있다.(뭔가..리엑트를 저격한 느낌)

뭔가 신기해서 한번 공부해 보았다.

구성요소 형식

Svelte의 문서에 보면

<script>
	// logic goes here
</script>

<!-- markup (zero or more items) goes here -->

<style>
	/* styles go here */
</style>

이런식으로 되어 있는데 뭔가 간단하였다.

스크립트안에는 구성 요소 인스턴스가 생성될 때 실행되는 JavaScript가 포함되어 있고 최상위 수준에서 선언되거나 가져온 변수는 구성 요소 마크업에 표시 된다고 합니다.

export 키워드를 사용하면 변수 선언을 속성 또는 prop으로 표시한다고 한다.

해당 컴포넌트에 prop을 내리면 export let foo;
이런식으로 작성하면 사용할 수 있고 초기값도 설정이 가능하다.

<Counter id={5}/>

Counter.svelte

<script>
  export let id;
</script>

이렇게 프롭으로 사용할 수 있다.

할당을 할때 react처럼 state를 변경하려고 하면 setState()를 사용하여 할 수 있지만
svelte같은 경우

<script>
	let count = 0;

	function handleClick () {
		// calling this function will trigger an
		// update if the markup references `count`
		count = count + 1;
	}
</script>

이렇게 할 수 있다. 업데이트 표현식 (count += 1)과 속성 할당 (obj.x = y)는 동일한 효과를 가진다고 한다.

배열같은 경우 push를 하면 자동으로 업데이트를 트리거 하지 않는다고 한다. 업데이트를 트리거 하려면 새로운 참조에 재할당식으로 구조분해 할당으로 해야 한다고 한다.

	let number = [1,2];
    const addNumber = () => {
    	numbers =  [...numbers, numbers.length + 1];
    }

Svelte 초기 설정

  1. Svelte를 설치한다.
npm init vite my-app -- --template svelte
cd my-app

그 후 실행을 하면 첫 화면이 나온다.

npm install
npm run dev

App.svelte에 보면 정말 신기하게 되어 있다.

script 영역 html영역 그리고 style영역으로 되어 있다.

<script>
  import logo from './assets/svelte.png'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <img src={logo} alt="Svelte Logo" />
  <h1>Hello world!</h1>

  <Counter />

  <p>
    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
    apps.
  </p>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
    the officially supported framework, also powered by Vite!
  </p>
</main>

<style>
  :root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  main {
    text-align: center;
    padding: 1em;
    margin: 0 auto;
  }

  img {
    height: 16rem;
    width: 16rem;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4rem;
    font-weight: 100;
    line-height: 1.1;
    margin: 2rem auto;
    max-width: 14rem;
  }

  p {
    max-width: 14rem;
    margin: 1rem auto;
    line-height: 1.35;
  }

  @media (min-width: 480px) {
    h1 {
      max-width: none;
    }

    p {
      max-width: none;
    }
  }
</style>

script에 import를 하고 script 닫히는 바로 아래에 html을 불려올 수 있는데 여기서 react와 비슷하게 컴포넌트를 불려와서 렌더링 할 수 있다.

Svelte로 라우터 지정

svelte에서 router설정하려면

 npm i -D svelte-routing

이것을 설치해준다.

설치 후

페이지 별로 보여줄 components를 만들어 주고 App.svelte에

<script>
 import logo from './assets/svelte.png'
 import Counter from './lib/Counter.svelte'
 // import routes from '../routes'
 import { Router, Link, Route } from "svelte-routing";
 import Home from "./routes/Home.svelte";
 import About from "./routes/About.svelte";

 export let url = "";

</script>

<Router url="{url}">
 <nav>
   <Link to="/">Home</Link>
   <Link to="about/1">About</Link>

 </nav>
 <div>
   <!-- <Route path="blog/:id" component="{BlogPost}" /> -->
   <Route path="/"><Home /></Route>

   <Route path="about/:id" component="{About}" />
 </div>
</Router>

<style>

</style>

이런식으로 만들어 주면 링크를 클릭하면 잘 라우팅이 되었다.

그리고 params나 query string을 가져오고 싶으면

params는

<Route path="about/:id" component="{About}" />

이렇게 /:id로 path를 설정해 놓으면

About.svelte의 script에서

export let id;

이렇게 코드를 짜면 잘 나온다. query string을 가져오고 싶어서 서치를 해봤는데 query-string npm을 사용한다.

npm i query-string
let parsed = {};

if (typeof window !== "undefined") {
  parsed = queryString.parse(window.location.search);
}
console.log(parsed);

이렇게 설정을 하면 ?token=sdfsdfsdf
이런 쿼리스트링이 있으면

parsed => {token: 'sdfsdfsdf'}

이렇게 할 수 있다.

0개의 댓글