1. AppLoading 정의
사용자가 서비스를 실행하면 Application은 다양한 작업을 수행한다. 이 과정에서 디바이스는 많은 리소스를 사용하게된다.
작업에는 우선순위가 있을것이고 우선순위에서 밀린 작업들은 비교적 느린 반응을 보인다.
또한 한 번에 많은 데이터를 불러올때 모든 데이터가 들어올때까지 기다리는 로직을 만들게된다면 페이지에 이미지, 폰트, 영상 등 콘텐츠를 기다리는 과정이 유저에게 보일 것이고 AppLodaing을 통해서 UX를 기술적을 좀 더 보완할 수 있다.
다시 말하면, 어플리케이션이 실행되거나 페이지를 전환할 때 이미지나 데이터들이 사용되는데 유저들이 그 과정을 경험하는 것은 UX적으로 좋지 않다.
갑자기 이미지가 한 번에 뜬다던가, 아이콘이나 폰트가 변하는 것들을 막아주기 위해 AppLoading을 사용한다.
2. 그래서 AppLodaing을 실행하면 어떻게 되는가?
쉽게 얘기하면 로딩이 완료될 때 까지 대체 이미지를 보여준다고 생각하면 된다. 이를 Splash Screen이라고 한다.
우리는 AppLoading을 통해서 API 호출, get user info, get Images, get Sound 등 다양한 역할을 수행할 수 있다.
3. AppLoading의 다양한 Prop Lifecycle
-
startAsync (funciton) : startAsync는 Promise를 반환하는 함수를 전달한다. AppLoading이 시작될 때 실행되는 함수
-
onError(function) : 데이터를 로드하는 과정에서 에러가 발생했을 때 실행되는 함수
-
onFinish(function) : 데이터를 로드하는 과정이 끝났을 때 실행되는 함수
-
위 그림을 참고하면 startAsync를 통해서 Apploading이 실행되는 시점에서 필요한 작업을 함수로 전달합니다. 해당 작업이 완료되면 onFinish에 전달한 함수가 실행되고 중간에 error가 발생했다면 onError에 전달한 함수가 실행됩니다.
4. EX Code
// startAsync: asset들을 불러오면서 Promise를 반환
// onFinish: asset들이 불러들어오는 과정이 마무리되었을 때 실행
// onError: startAsync의 로직이 실행되는 과정에서 error가 발생했을 때 실행
<AppLoading startAsync={loadAssets} onFinish={onFinish} onError={(e) => console.error(e)} />
