svelte를 시작 해보자

svelte 학습을 위한 프로젝트로 배틀그라운드 전적 검색 사이트를 만들고 있습니다. 

https://github.com/dungong/pubg-web

한 3시간 정도 코딩을 진행 했는데, 이것저것 만져보느라 작업은 거의 진전이 없습니다.

흥미로웠던 점은

1) <input/> 테그의 value관리가 아주 쉽다는 것.

react에서는 보통 input 테그의 value를 아래와 같은 형태로 관리하게 되는데,

import {useState} from "react"

const MyInput = () => {
	const [value,setValue] = useState("")
    return (
    <input value={value} onChange=(e => { setValue(e.target.value) })/>
    )
}

같은 기능을 svelte로 구현하면 아래와 같다. 훨씬 간편하다. 원래는 bind:value={value} 지만, 축약하여 사용할 수 있다.

<script>
 let value:string;
</script>

<input bind:value/>

아직 많은 기능을 살펴본 것은 아니지만 write less code라는 svelte의 철학이 확 와닿는 것 같다.

 

2) useEffect 와 비슷한 use:action

react에서 이벤트를 useEffcet를 사용하면

import {useEffect} from "react"

const MyInput = () => {
	
    const handleScroll = () => {
    // event handle logic ...
    }
    
    useEffect(()=>{
    	//컴포넌트가 렌더링될때 (componentDidMount)
        	window.addEventListner('click', handleScroll);
            //컴포넌트가 화면에서 사라질때 (componentDidUnmount)
    	return ()=>    	window.removeEventLisnter('click', handleScroll);
    },[])
	return (
    <input />
    )
}

같은 기능을 svelte로 use:function은 useEffect와 같은 기능을 수행한다.

<script>

const handleScroll = (handler:() => void):
{ destroy: () => void } => {

	document.addEventListener('scroll', onScroll, true);
    
    return { 
    // 컴포넌트가 사라질때 use-effect의 clean-up function과 같이 동작 리턴 함수의 이름은 destroy로 정해져 있음.
    destroy() {
     	document.removeEventListener('scroll', onScroll, true);
    }
   };
};
</script>

<div use:handleScroll={()=>{}}/>