Chapter10 Project Set up and PreLoading

안녕하세요. 이번 시간은 노마드 코더의 인스타 클론 코딩 Chapter 10을 시작하겠습니다. 정리할 내용은 아래와 같습니다.

• Expo Project Setup
  
• PreLoading
  

Expo Set up

Expo는 리액트 네이티브를 크로스 플랫폼으로 개발하기 위한 build Tool입니다. 네이티브 모듈을 더 편하게 사용할 수 있도록 되어 있고, 실제 기기에서 테스트 해 볼 수 있도록 가능하게 해주는 XDE라고 합니다.

Expo에는 React-Native의 Set-up이 미리 구성되어 있기 때문에 개발을 시작하기 매우 간편합니다. 또한 개발 후 배포에서 업데이트는 Expo에 Publish만 해주면 Expo가 알아서 업데이트 해주는 장점이 있는 반면 Expo에서 제공하는 API만 사용합니다. 하지만 노마드 코더는 Expo가 iOS / Android / Web 이 세가지 플랫폼을 동시에 지원하게 되어 사용하기를 추천한다고 합니다. 저도 React-Native로만 코드를 짠 다음 세가지의 플랫폼에 동시에 올릴 수 있는 장점이 가장 큰 메이트가 있다고 생각합니다.

Expo Set up과정은 다음과 같습니다.

• yarn add global expo-cli 로 Expo CLi를 설치합니다.
• expo init ProjectName 으로 Expo App을 설치합니다.

라이브러리 설치

노마드 코더는 Expo로 프로젝트를 만든 후에 yarn add styled-components react-navigation apollo-boost graphql react-apollo-hooks로 해당 라이브러리를 추가하였습니다.

PreLoading이란?

노마드 코더는 프리로딩을 사용한다고 하는데요. 그럼 프리로딩이 무엇인지 알아봅시다. 우선, 프리로딩의 뜻은 react-preload(npm)아래와 같습니다.

A React component to preload images. It renders a passed component during the loader phase, and renders its children once the images have been successfully fetched. 이미지를 사전로드하는 React 구성 요소 로딩 단계에서 전달 된 구성 요소를 렌더링하고 이미지가 성공적으로 페치되면 해당 하위 작업을 렌더링합니다.

자, 이것이 무슨 말일까요?
일반적으로 사용자는 앱을 실행 시켰을 때 앱 로고나 Splash 화면이 나와있지 않은 상태보다 loading이 되어있는 상태에서 보는 것을 선호하며 더 잘 구성된 앱이라는 인식이 강하기 때문에 미리 데이터를 Load해서 보여주려고 하는 것입니다.

PreLoad 사용법은 Preload-Expo에 가보면 더 자세히 나와있습니다. 노마드 코더가 사용한 방법을 알아보겠습니다. App.js

import React, { useState, useEffect } from "react";
import { Ionicons } from "@expo/vector-icons";
import { AppLoading } from "expo";
import * as Font from "expo-font";
import { Asset } from "expo-asset";
import { Text, View, AsyncStorage } from "react-native";
import { InMemoryCache } from "apollo-cache-inmemory";
import { persistCache } from "apollo-cache-persist";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo-hooks";
import apolloClientOptions from "./apollo";

export default function App() {
  const [loaded, setLoaded] = useState(false);
  const [client, setClient] = useState(null);
  const preLoad = async () => {
    try {
      await Font.loadAsync({
        ...Ionicons.font   // Font를 Load합니다.
      });
      await Asset.loadAsync([require("./assets/logo.png")]);
      const cache = new InMemoryCache();
      await persistCache({
        cache,
        storage: AsyncStorage
      });
      const client = new ApolloClient({
        cache,
        ...apolloClientOptions
      });
      setLoaded(true); // Load가 다 되면 state를 변경합니다.
      setClient(client);
    } catch (e) {
      console.log(e);
    }
  };
  useEffect(() => {
    preLoad();
  }, []);
  return loaded && client ? (
    <ApolloProvider client={client}>
      <View>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    </ApolloProvider>
  ) : (
    <AppLoading />
  );
}

결국 Promise의 await로써 로딩이 될 때까지 기다리고 로딩이 다 되면 Screen으로 전환하기 위하여 useEffect를 사용합니다. 이 때의 useEffect는 compoeneDidMout() 라이프 사이클 사이에서 수행할 수 있습니다. 예전 문법을 보시면 이해가 더 편합니다.
Preload-Expo

class App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
    });

    this.setState({ fontLoaded: true });
  }

  // ...
}

참고자료

• academy.nomadcoders.InstagramClonCoding