svelte 에서 on:click 이용 주의사항

일반적인 onclick 이벤트와 사용 장소는 같으나 운영 방식은 전혀 다르다.

그래서 한 2일정도 해멨다.

on:click 작동 방식 

on:click = {}

이렇게 {} 를 사용한다. {} 가 들어가면 뭔가 svelte 에서 컴파일 변환을 한다는 뜻이다.

우선 {} 안에 함수를 넣으면 이상하게 실행시 함수가 페이지 불러올때 바로 실행된다.

위에서 이렇게 함수 선언을 먼저했다고 치자

function alt(arg){

alert(arg)

}

그리고 html button 이나 div 등에 

on:click={alert('test')} 를 

이렇게 써 넣으면 페이지 불러올때 그냥 alt() 를 실행해 버린다. 

그리고 해당 버튼이나 영역을 클릭하면 먹히지 않는다.

그럼 어떻게 해야하냐!

on:click={alt} 이렇게 함수명만 입력하거나: 뒤에 ()를 뺀다.

아니면 함수에 인자를 넣어서 실행해야한다면

on:click = {()=>alt('test')}

이렇게  하면 인자를 넣어서 실행할 수 있다.

svelte 에서 onclick 기존 이벤트를 넣으면 어떻게 될까?

우선 실행은 된다. 그러나 함수명이 컴파일 과정에서 압축 약어로 변환되기 때문에

해당 함수가 없다는 에러가 발생한다.

그래서 on:click 를 사용해서 변환된 함수가 서로 대응이 되도록 함수선언부와 사용부를 같게 해수는 과정을 고려해서

on:click 를 사용해야 한다.

아마도 그러한 이유로 함수명만 그리고 인자가 들어가면 ()=> 이러한 형태를 앞에 넣어 줘야 인식을 하는것 같다.

https://svelte.dev/tutorial/inline-handlers 

위 링크가 해당 부분을 나타내는 내용인 것 같다.