특정 화면에서 반복적인 작업을 수행해야하는 아래와 같은 경우를 가정해보자.
- Index.vue 는 15초를 주기로 새로운 배경 이미지를 보여 준다.
개발은 크게 고민하지 않고 공개된 Unsplash API 을 활용 이미지 목록을 가져와서 주기적으로 화면의 배경 이미지를 바꿔주었다.
- src/store/unsplash.js
- src/view/Indes.vue
Index View 에서는 ① mounted 되면 upsplash 에서 가져온 이미지 목록이 있는지 확인하고 없는 경우 fetch 함수를 호출하여 이미지 목록을 가져온다. ② setTimeout 함수를 사용하여 15000 단위로 바탕하면 이미지를 바꿔준다.
위 코드의 문제점은 아래와 같다.
- 다른 View 로 이동하더라도 백그라우드에서 ② 작업이 무한 실행된다.
- 다른 View 에서 Index View 로 이동하면 ① 작업을 수행하고 ② 작업을 다시 무한 실행한다.
- 불필요한 메모리 누수가 발생한다.
◼︎ 개발환경
- Model : MacBook Pro (14-inch, 2021)
- CPU : Apple M1 Pro
- MENORY : 16GB
- DISK : 512 GB SSD
- OS : macOS 13.2 (22D49)
문제 해결
Vue3 Lifecycle 에 따르면 Composition API 에서 setup 은 create 와 같으며 View 가 마운트 되면 (View 가 화면에 보여지면) mounted (onMounted) 가 실행되고 언마우트 되면 (다른 View 로 이동하면) unmounted (onUnmounted)가 실행되는데 이점을 이용하면 Index 가 화면에 보여질 때만 ② 작업을 수행하도록 할 수 있다.
반복작업은 setInterval() 함수를 사용하고 더이상 반복작업이 필요없는 경우에는 (다른 View 로 이동할 때) , setInterval() 호출시 리턴되는 ID 값을 인자로 clearInterval() 함수를 호출하면 timer 을 초기활 할 수 있다.
댓글 없음:
댓글 쓰기