Vue의 라이프사이클 훅에서 async 사용
Created에서 데이터를 받아온 뒤 mounted에서 화면에 띄워주려는데
데이터를 받아오는 속도에 따라 받아온 데이터가 화면에 적용되고 어떨때는 되지 않고
그런 문제점 때문에 이슈리스트에 해당 기능이 올라왔다
...
mounted() : {
//데이터를 받아오는 함수(0.5초)
..............
//데이터를 처리하는 함수(0.1초)
..............
},
...
mounted라는 훅 자체에 async를 사용할 수는 있지만 권장되지 않는 방법이라고 함
Vue의 라이프사이클 훅은 모두 동기적으로 동작하는데
mounted 자체에 async를 걸어봤자 그 안의 await처리된 함수들은 제대로 이행되더라도
다른 훅들이 기다려주지 않는다고 한다.
Forcing Vue to delay creation or mounting or any of the other lifecycle methods to wait on your network request or long-running asynchronous process will impact the user in noticeable ways. Imagine a user coming to your site and then having to wait for 4 seconds with a blank screen while the component waits for the user's spotty cell connection to finish your network request.
(Vue를 강제로 생성하거나 마운트하거나 다른 라이프사이클 방법 중 하나를 네트워크 요청 시 대기하도록 하거나 오래 실행되는 비동기식 프로세스를 지연시키는 것은 사용자에게 눈에 띄는 방식으로 영향을 미칠 것입니다. 사용자가 사이트에 와서 구성 요소가 사용자의 얼룩진 셀 연결이 네트워크 요청을 완료하기를 기다리는 동안 빈 화면으로 4초 동안 기다려야 한다고 상상해 보십시오.)
UX때문에 최대한 빈 화면을 오래 노출하지 않으려고 하는 것 같음
그래서 그냥 간단하게 method에 따로 빼놓고 async처리하면 됨
...
mounted() : {
this.fetchData() //데이터를 받아오는 함수
},
methods : {
async fetchData(){
const data = await fetch(.......);
//받아온 데이터를 이용할 로직들
}
}
...
