📘
만들면서 배우는 svelte
  • 1. svelte 소개
  • 2. 개발환경 설정
    • 수업 코드 및 문서 가이드 안내
    • 비주얼스튜디오 & REPL
    • 설치
  • 3. 컴포넌트 - 기본
    • 앱 구조 설명 : main.js, App.js, 폴더구조
    • 컴포넌트 기본 : 레이아웃 샘플 구성(여러 component 연동)
    • state
    • reactivity
    • 컴포넌트 통신방법용 기본 앱 코드
    • 컴포넌트 통신방법 1 : props
    • 컴포넌트 통신방법 2 : dispatch
    • 컴포넌트 통신방법 3 : context API
    • 컴포넌트 통신방법 4 : store
  • 4. 컴포넌트 - 템플릿 제어
    • {#if ...}
    • {#each ...}
    • bind
    • event
    • slot
    • lifecycle (생명주기)
  • 5. 스타일 및 효과
    • 동적 css 적용방법
    • transition : 화면전환
    • todo store 적용 3 : 컴포넌트에 store 연동
  • 6. 실습 1 - TODO 만들기
  • 7. 실습 2 - store를 통한 todo 리팩토링
  • 8. 라우터 - routify
    • 소개 & 설치
    • 라우팅 생성
    • 링크 생성
    • parameter 전달 및 받기
    • todo 서비스에 적용
  • 9. ajax 처리
    • fetch와 {#await ..} 적용
    • axios 적용
  • 10 . 기타
    • 경로 쉽게 적용하기
    • javascript 배열 조작 메서드
    • 화살표 함수
Powered by GitBook
On this page

Was this helpful?

  1. 4. 컴포넌트 - 템플릿 제어

lifecycle (생명주기)

lifecycle 즉 생명주기를 설명하도록 하겠습니다.

라이프사이클 함수는 컴포넌트가 화면에 마운트 되기 전 되고 난 후 등의 상태에 어떤 작업을 처리할 때 사용하는 함수라고 보시면 됩니다.

  • onMount: 컴포넌트가 돔에 마운트 되면 실행

  • onDestroy: 컴포넌트가 해제된 후 실행

  • beforeupdate: 컴포넌트가 마운트 되기전 실행

  • afterUpdate: 컴포넌트가 마운드 된 후 실행

  • tick: 컴포넌트 변경이 완료되면 실행(라이프사이클과 조금 성격이 다름)

svlete 라이프사이클의 전체적인 실행 순서를 보면

  • beforeUpdate → onMount → afterUpdate → onDestroy

그리고 부모와 자식 컴포넌트 사이에 라이프사이클의 경우 는 부모의 beforeUpdate 이후 자식 컴포넌트의 모든 라이프사이클 즉 afterUpdate 이후에 부모의 onMount 가 발생합니다. 예제는 이전에 만든 todo 앱에 라이프사이클 소스를 넣어 실행해 보도록 하겠습니다.

  • app.svelte

import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from 'svelte'

...

onMount(async() => {
	console.log('App onMount')
})

onDestroy(async() => {
	console.log('App onDestroy')
})

beforeUpdate(async() => {
  console.log('App beforeUpdate') 
})

afterUpdate(async() => {
	console.log('App afterUpdate')
})
  • child.svelte

import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from 'svelte'

...

onMount(async() => {
	console.log('child onMount')
})

onDestroy(async() => {
	console.log('child onDestroy')
})

beforeUpdate(async() => {
	console.log('child beforeUpdate')
})

afterUpdate(async() => {
	console.log('child afterUpdate')
})

결과

App beforeUpdate // 부모컴포넌트
TodoList.svelte:20 TodoLists beforeUpdate // 자식컴포넌트
TodoList.svelte:12 TodoLists onMount // 자식컴포넌트
TodoList.svelte:27 TodoLists afterUpdate // 자식컴포넌트
App.svelte:103 App onMount // 부모컴포넌트
App.svelte:115 App afterUpdate // 부모컴포넌트

tick의 경우는 조금 다른 성격을 가집니다. 컴포넌트가 업데이트 된 후 promise객체를 반환하는 형태인데요. 예제를 통해서 이부분도 알아보도록 하겠습니다

import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from 'svelte'

...

onMount(async() => {
	console.log('child onMount')
})

onDestroy(async() => {
	console.log('child onDestroy')
})

beforeUpdate(async() => {
  console.log('the component is about to update');
  await tick()
  console.log('the component just updated');  
})

afterUpdate(async() => {
	console.log('child afterUpdate')
})

위 소스에서 await tick()을 넣고 넣지 않고의 console.log 위치를 보시겠습니다.

await tick()이 없을 경우

App beforeUpdate
TodoList.svelte:21 the component is about to update
TodoList.svelte:23 the component just updated
TodoList.svelte:12 TodoLists onMount
TodoList.svelte:27 TodoLists afterUpdate
App.svelte:103 App onMount
App.svelte:115 App afterUpdate

await tick()이 있을 경우

App beforeUpdate
TodoList.svelte:21 the component is about to update
TodoList.svelte:12 TodoLists onMount
TodoList.svelte:27 TodoLists afterUpdate
App.svelte:103 App onMount
App.svelte:115 App afterUpdate
TodoList.svelte:23 the component just updated

tick() 함수를 await과 함께 넣을 경우는 모든 DOM이 랜더링 되고 난 후에 이를 기다렸다가 the component just updated 메시지가 나온 것을 볼 수 있습니다.

즉 tick()함수를 이용하면 라이프사이클함수의 상태와는 별개로 모든 돔의 렌더링을 기다리고 그후에 작업을 할 수 있는 작업을 할 수 있습니다.

PreviousslotNext동적 css 적용방법

Last updated 4 years ago

Was this helpful?

[만들면서 배우는 Svelte]
만들면서 배우는 svelte