[FN] 마이페이지 회원 정보 가져오기, 로그아웃 / Firebase Database

마이페이지를 개발중인데 Firebase Database에 저장한 사용자의 회원 정보를 가져오도록 구현해보았다.

 

1. 회원 이름 가져오기

 

일단 사용자의 이름을 가져오기 위해 currentUser에 Firebase Authentication에서 현재 로그인된 사용자를 가져온다.

import React, { useState, useEffect } from 'react';
import firestore from "@react-native-firebase/firestore";
import auth from "@react-native-firebase/auth";

const FirstMypageScreen = ({ navigation }: Props) => {
  const [userName, setUserName] = useState<string | null>(null);
  
  useEffect(() => {
  const fetchUserInfo = async () => {
    try {
      const currentUser = auth().currentUser;

• 사용자의 정보를 가져왔다면
• userDoc에 Firestore - "users" 컬렉션에 접근
• 사용자의 uid를 기반으로 문서를 가져온다.

if (currentUser) {
          const userDoc = await firestore()
            .collection("users")
            .doc(currentUser.uid) 
            .get();

 

• 가져온 정보가 존재한다면
• 문서 데이터를 JavaScript 객체로 반환한다.
• 그리고 setUserName에 유저 데이터에 있는 name 필드를 넣는다
• name 필드가 빈 값일 경우 "알 수 없음"으로 출력
• [] 빈 배열로 컴포넌트가 처음 화면에 나타날 때 한 번만 실행된다.

if (userDoc.exists) {
          const userData = userDoc.data();
          setUserName(userData?.name || "알 수 없음");
          }
          
          fetchUserInfo();
  }, []);

 

2. 로그아웃

로그아웃은 지난 게시글에서 로그인 관련 함수들을 정의해 둔 authService.js를 불러와서 사용하면 된다.

 

↓ ↓ ↓ ↓ ↓ ↓ authService.js 관련 설명은 ↓ ↓ ↓ ↓ ↓ ↓

[FN] React Native 회원가입 로그인 개발 일지 - Firebase Authentication

[FN] React Native 회원가입 로그인 개발 일지 - Firebase Authentication

 

handleSignOut에 authService.js에 정의해둔 signOut을 사용하면 된다.

const handleSignOut = async () => {
    try {
      setLoading(true);
      await signOut();
      navigation.replace('Login');
    } catch (error) {
      console.error('로그아웃 실패:', error);
      setLoading(false);
    }
  };

 

홈 화면에 있는 카테고리 버튼들처럼 따로 카테고리 버튼 컴포넌트를 만들고 불러와서 사용하였다.

카테고리 버튼을 클릭했을 때 onCategoryPress를 호출한다.

 

MyPageCategory.tsx 

const MyPageCategory: React.FC<Props> = ({ categories, onCategoryPress }) => {
  return (
    <View style={styles.buttonBox}>
      {categories.map((category) => (
        <TouchableOpacity
          key={category.id}
          style={styles.categoryButton}
          onPress={() => onCategoryPress(category.id)}
        >
          <Image source={category.icon} style={styles.categoryIcon} />
          <Text style={styles.buttonText}>{category.label}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

 

클릭된 카테고리 id에 따른 처리 기능

const handleCategoryPress = (id: number) => {
    const category = categoryButton.find((category) => category.id === id);
    if (category && category.action) {
      category.action(); 
    }
  };

 

다시 FirstMypageScreen에 categoryButton을 정의하고, 로그아웃 카테고리에 위에서 정의한 action: handleSignOut을 통해 정상적으로 로그아웃 기능이 구현된다.

const categoryButton = [
    { id: 1, label: '회원정보수정', icon: require('../images/edit_user_icon.png') },
    { id: 2, label: '비밀번호변경', icon: require('../images/unlock_icon.png') },
    { id: 3, label: '알림설정', icon: require('../images/alarm_icon.png') },
    { id: 4, label: '로그아웃', icon: require('../images/exit_icon.png'), action: handleSignOut },
  ];

<MyPageCategory categories={categoryButton} onCategoryPress={handleCategoryPress} />

 

 

마이페이지 구현 결과

회원 가입에서 입력한 사용자의 이름을 불러옴 / 로그아웃 버튼을 누르면 로그아웃 되면서 다시 처음 로그인 화면으로 전환