@deveely

이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.Svelte에서 컴포넌트는 화면에 랜더링되거나 사라질 때를 나타내는 컴포넌트의 상태가 있다.이 상태의 흐름을 컴포넌트 생명주기라 한다.mounted: 컴포넌트가 화면 또는 다른 컴포넌트에 랜더링된 (연결된) 상태. 이 전에는 화면 요소에 접근할 수 없음destroyed: 컴포넌트가 화면 또는 다른 컴포넌트에서 사라진 (연결이 해제된) 상태before update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 되기 전 상태after update: 컴포넌트의 반응성 데이터 변경에 의해 재랜더링 된 후 상태이런 상태들은 컴포넌트가 화면(DOM)상에서 어떻게 다뤄지냐에 따라 다양하게 호출된다.예를들어 특정 컴포넌트가..

[Svelte 시리즈] 데이터 바인딩, 조건문, 반복문, 이벤트 핸들링이 포스트는 HEROPY 님 유튜브 Svelte 강좌를 보고 공부한 내용을 정리한 포스트입니다.데이터 단/양방향 바인딩Svelte는 기본적으로 단방향 데이터 바인딩이다.아래 예제에서 input에 name을 바인딩 했지만, 값을 변경한다고 name 변수의 값은 바뀌지 않는다.Hello {name}양방향 바인딩을 하려면 bind 키워드를 사용해 아래와 같이 작성해주면 된다.Hello {name}조건문마크업 영역에서 조건문을 사용할 수 있다.{#if 조건} 조건문 내용 {/if} 와 같이 조건문 영역을 잡을 수 있다.{:else}, {:else if 조건} 를 통해 else / else if 구문을 작성할 수 있다.Svelte의 대부분 구문..