본문 바로가기

Web과 프로그래밍 언어/JavaScript25

[SVELTE]Lifecycle - onMount, onDestory, beforeUpdate and afterUpdate, tick Lifecycle lifecycle 즉, 생명주기!라이프사이클 함수는 컴포넌트가 화면에 마운트 되기 전과 되고 난 후의 상태에 어떤 작업을 처리할 때 사용하는 함수onMount : 컴포넌트가 돔에 마운트 되면 실행onDestroy : 컴포넌트가 해제된 후 실행berforeUpdate : 컴포넌트가 마운트 되기 전 실행afterUpdate: 컴포넌트가 마운트 된 후 실행tick : 컴포넌트 변경이 완료되면 실행 (라이프사이클과 성격이 조금 다르다)순서 : beforeUpdate -> onMount -> afterUpdate -> onDestroy부모와 자식 컴포넌트 사이에 라이프사이클의 경우 는 부모의 beforeUpdate 이후 자식 컴포넌트의 모든 라이프사이클 즉 afterUpdate 이후에 부모의 o.. 2023. 3. 8.
[SVELTE]Bindings- Text inputs, Numeric inputs, Checkbox inputs, Group inputs, Textarea inputs, Select multiple, Contenteditable bindings, Each block bindings, Media elements, Dimensions, This, Component bindings, Binding to component instance Bindings 1. Text inputsbind:value 지시어를 사용할 수 있다. name 값을 변경하면 입력 값이 업데이트될 뿐만 아니라 입력 값이 변경되면 name도 업데이트된다.Hello {name}! 2. Numberic inputs {a} + {b} = {a + b} 3. Checkbos inputs Yes! Send me regular email spam{#if yes} Thank you. We will bombard your inbox and sell your personal details.{:else} You must opt-in to continue. If you're not paying, you're the product.{/if}.. 2023. 3. 8.
[SVELTE] Events - DOM events, Inline handlers, Event modifiers, Component events, Event forwarding, DOM event forwarding Eventson 지시어를 사용해 요소의 모든 이벤트를 수신할 수 있다.  The mouse position is {m.x} x {m.y} 또한 이벤트 핸들러를 인라인으로 선언할 수도 있다.  m = { x: e.clientX, y: e.clientY }}"> The mouse position is {m.x} x {m.y} 돔 이벤트 핸들러는 동작을 변경하는 수정자를 가질 수 있다. 예를들어 once 수정자가 있는 핸들러는 한번만 실행된다.  Click me 컴포넌트는 이벤트를 전달할 수 있다. 그렇게 하려면 이벤트 디스패쳐(dispatcher)를 만들어야 한다.cf) 이벤트 디스패쳐 : 이벤트 디스패처는 하나의 액터가 이벤트를 디스패치하고 해당 이벤트를 리스닝하는 다른 액터가 알림을 받.. 2023. 3. 8.
[SVELTE] Logic - If blocks, Else blocks, Else-if blocks, Each blocks, Keyed each blocks, Await blocks LogicHTML에는 조건문 및 루프와 같은 논리를 표현하는 방법이 없다. 마크업을 조건부로 랜더링 하기 위해 IF블럭으로 감싼다.{#if user.loggedIn} Log out {/if}{#if !user.loggedIn} Log in {/if} 상호 배타적인 두 조건이 있을 경우 else블록을 사용할 수 있다. {#if user.loggedIn} Log out {:else} Log in {/if} {user.loggedIn ? `Log out` : `Log In`} 여러 조건일 경우 else if와 함께 연결할 수 있다.  {#if x > 10} {x} is greater than 10{:els.. 2023. 3. 8.

티스토리툴바