스파르타 코딩 클럽 🤟🏻 - 개발일지 3

과제 Github

라이브러리

import React from "react";
import { StyleSheet, View, Text, TouchableOpacity, Alert } from "react-native";
import { Col, Row, Grid } from "react-native-easy-grid";
import { Container, Content, Thumbnail } from "native-base";
import { logout } from "../config/firebaseFunctions";
import firebase from "firebase/compat";
import "firebase/compat/firestore";

함수

• 로그아웃 기능

firebaseFunctions.js

export async function logout(navigation) {
  try {
    const currentUser = firebase.auth().currentUser;
    await firebase.auth().signOut();
    navigation.push("SignInPage");
  } catch (err) {
    Alert.alert("로그아웃 실패 -> ", err.message);
  }
}

• 로딩화면 출력

SignInPage.jsx

1초간 지연

useEffect(() => {
  navigation.addListener("breforeRemove", (e) => {
    e.preventDefault();
  });

  setTimeout(() => {
    setReady(true);
  }, 1000);
}, []);

상태 관리를 통한 Loading 화면 관리

const [ready, setReady] = useState(false);

return ready ? (
  <Container style={styles.container}>
    <ImageBackground source={bImage} style={styles.backgroundImage}>
      <Content contentContainerStyle={styles.content} scrollEnabled={false}>
        ...
      </Content>
    </ImageBackground>
  </Container>
) : (
  <Loading />
);

소감

상태 관리에 대한 개념이 점차 잡혀가는 것이 느껴진다.
아직 많이 부족하지만 문서를 보면서 혼자 개발해 나갈 수 있을 것만 같은 느낌..? 🙃
어렵지만 재미가 붙어서 다행이다.
완강까지 가보자고~