IP : 3.238.87.31

[오픈소스] svelte on:click 사용 방법 주의사항

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 

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

 

 

 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오톡으로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

공실장 개발센터

번호 제목 글쓴이 날짜 조회수
20 오픈소스 SVELTEKIT+ CAPACITOR 설치 그리고 안드로이드 스튜디오 빌드 앱실행 관리자 01-28 1,531
19 오픈소스 sveltekit 로그인 관리자 12-19 1,299
18 오픈소스 sveltekit Cloudflare에 배포하면 받듣시 해줘야할 일! 서브도메인 ssl 통신 허용! 관리자 12-09 2,110
17 오픈소스 sveltekit 빌드하고 배포하기 (클라우드플레어) 관리자 12-06 2,243
16 오픈소스 sveltekit 빌드하고 배포하기 클라우드플레어 이용하게된 계기 - 프롤로그 관리자 12-06 2,762
15 공시사항 신고가 접수된 게시글입니다. 관리자 11-22 1,020
14 오픈소스 svelte + capacitor 에서 https 로 post로 값넘기기 +1 관리자 01-31 2,036
13 오픈소스 svelte routify 에서 layout 상속 재정의 하기 +1 관리자 10-05 1,938
12 오픈소스 svelte + capacitor + cordova + ionic 빌드하고 폰에 올려서 확인하기 관리자 10-05 3,996
11 오픈소스 svelte + capacitor + cordova + ionic 만들기 쉬운 하이브리드앱 조합 관리자 10-05 2,885
10 오픈소스 svelte sapper 링크 걸기 a href 말고 스크립트로!! 관리자 10-01 3,551
9 오픈소스 svelte on:click 사용 방법 주의사항 관리자 10-01 3,539
8 오픈소스 svelte sapper 빌드하고 서버에 올리기 +1 관리자 09-30 3,621
7 오픈소스 svelte ui +1 관리자 08-03 1,744
6 오픈소스 angular vs react vs vue vs svelte? 관리자 08-03 2,122
5 오픈소스 지도형 홈페이지 파일 그누보드 관리자 04-24 1,733
4 오픈소스 지도형 중개업소 홈페이지 보수 계획 관리자 12-05 1,860
3 IOT 수도계량기 esp32-cam 관리자 12-05 2,762
2 IOT 현재 건물에 설치 되어 있는 CCTV 의 문제점 그리고 ESP32-CAM +2 관리자 12-05 4,505
1 공시사항 공실장 개발샌터 안내 +1 관리자 12-03 1,967