9.10.3 원하는 시점에 Splash 화면 숨기기

이제 원하는 시점에 Splash 화면을 숨기면 됩니다. Splash 화면을 숨기는 방법은 다음과 같습니다.

import SplashScreen from 'react-native-splash-screen'
SplashScreen.hide();

첫 번째로, 로그인되어 있지 않다면 숨겨야겠지요?

screens/RootStack.js

(...)
import SplashScreen from 'react-native-splash-screen';

const Stack = createNativeStackNavigator();

function RootStack() {
  const {user, setUser} = useUserContext();

  useEffect(() => {
    // 컴포넌트 첫 로딩 시 로그인 상태 확인하고 UserContext에 적용
    const unsubscribe = subscribeAuth(async currentUser => {
      // 여기에 등록한 함수는 사용자 정보가 바뀔 때마다 호출되는데,
      // 처음 호출될 때 바로 unsubscribe해 한 번 호출된 후에는 더 이상 호출되지 않게 설정
      unsubscribe();
      if (!currentUser) {
        SplashScreen.hide();
        return;
      }
      const profile = await getUser(currentUser.uid);
      if (!profile) {
        return;
      }
      setUser(profile);
    });
  }, [setUser]);

(...)

두 번째로, 사용자가 로그인한 경우에는 FeedScreen을 보여주겠죠? 거기서 posts 값이 준비됐을 때 SplashScreen을 숨겨줍시다.

screens/FeedScreen.js

(...)
import SplashScreen from 'react-native-splash-screen';

function FeedScreen() {
  const {posts, noMorePost, refreshing, onLoadMore, onRefresh} = usePosts();

  const postsReady = posts !== null;
  useEffect(() => {
    if (postsReady) {
      SplashScreen.hide();
    }
  }, [postsReady]);

(...)

Splash 화면을 원하는 시점에 숨기는 작업이 모두 끝났습니다! 이제 앱을 완전히 종료한 후 다시 가동해주세요. Splash 화면이 잘 나타나고 잘 사라지나요?

이번 프로젝트를 마치느라 정말 고생 많았습니다. 이번 프로젝트에서는 Firebase에 원하는 데이터를 저장하고 읽는 방법을 배우고, 컴포넌트를 만들어가는 단계에서 로직을 Hook으로 분리해가면서 코드를 리팩토링하는 방법도 배웠습니다. 다른 화면 간에 흐름을 제어하기 위해서 이벤트를 사용하는 방법도 배웠지요.