[React Native Master Class By Nomad Coders] #2.1 ~2.3 AppLoading

#2.1 AppLoading Part One

• Creact React Native App에서도 expo SDK를 사용할 수 있다.
• AppLoading Component는 사용자에게 앱이 보여지기 전에, 원하는 어떤 요소라도 시작 전에 모두 다 불러올 수 있게 해준다.
• 예로, API를 호출하거나 이미지 혹은 폰트를 미리 불러올 때 유용
• AppLoading은 Splash screen을 띄운다.

  Splash Screen?
  IOS: 앱을 시작할 때 보여주는 간단한 이미지. 앱이 구동되자마자 빠르게 노출될 수 있어서 앱이 빠르게 반응한다는 ux를 실현할 수 있다. 모든 앱은 반드시 런처 아이콘 또는 이미지를 보여줘야 한다.
  Android: 유저가 어플리케이션을 사용할 때 처음 느끼는 UX이다. 앱이 실행되면서 빈 화면이 보인다면, 앱자체의 성능 이슈가 있다고 느낄 수 있다.

• 원하는 데이터들을 다 불러오면 AppLoading이 종료되면서, Splash Screen에서 다른 화면으로 넘어간다.

Pre-Load가 필요한 이유

• 어플리케이션의 초기 화면이 완전히 렌더링 되기 전에 미리 필요한 데이터들을 API 통신을 통해서 가져오고 싶을 때 필요하다.

#2.2 AppLoading Part Two

• local에 저장된 image와 서버에서 받아오는 이미지를 pre-load하는 방식의 차이가 있다.
  - pre-load가 필요한 이미지는 보통 local에서 관리하는 것이 좋다. 초기 렌더에서 꼭 필요한 에셋이라면 서버 상태에 의존하지 않는 에셋 관리가 필요하다.

const startLoading = async () => {
  //local image pre load
  await Asset.loadAsync(require("./상대경로"));
  //server image pre load
  await Image.prefetch("서버 주소");
}

#2.3 AppLoading Part Three

• expo api hooks 중 useAssets와 useFonts를 사용해서 pre-load 구현이 가능

//useAssets hook은 local data만 가능하다. prefetch (x)
const [assets] = useAssets([require("./my-face.jpeg")]);
const [loaded] = Font.useFonts(Ionicons.font);

if(!assets || !loaded) {
  return <AppLoading />;
}

• 훅스를 사용해서 pre load를 구현하면 코드가 간결해지는 장점이 있다.
• 반면 api 요청이나 DB 초기화 등 다양한 기능을 Apploading 시점에서 구현하기 위해서는 utill 함수를 새로 정의해서 진행하는 방식이 좋다.