React Native Firebase에 데이터 저장하기

이 전 글에는 Firebase로 회원 가입, 로그인을 구현해보았다.

이번에는 회원가입 후 사용자의 닉네임과 프로필 사진을 Firebase에 저장해보자.

Firestore는 Firebase에서 제공하는 NoSQL 베이스이다. Firestore에 데이터를 읽고 쓸 때는 규칙을 지정할 수 있다.

이 규칙을 통해 데이터베이스 안에 저장된 데이터에 대해 사용자의 권한을 지정할 수 있다.

 

Firestore 데이터베이스 만들기

먼저 Firebase 콘솔 페이지에 접속해 사이드 메뉴에 있는 Firestore Database를 선택한 뒤 데이터베이스 만들기 버튼을 클릭한다.

테스트만 진행할 것이기 때문에 테스트 모드에서 시작을 체크하고 다음 버튼을 클릭한다.

Cloud Firestore의 위치는 asia-northeast3(서울 리전)을 선택한다.

테스트 모드에서 시작하게 되면 30일이 지난 뒤 데이터가 읽고 쓰기가 제대로 작동하지 않기 때문에 규칙 탭으로 들어가 아래와 같이 수정해준다.

---

Firestore에 프로필 저장하기

Firestore에는 문서(document)와 컬렉션(collection)이라는 개념이 있는데, 문서는 key, value 쌍으로 이루어져 있고, 고유 ID가 있어야 한다. 이 문서들의 집합이 컬렉션이다.

 

우선 lib 디렉터리에 users.js라는 파일을 만들고 아래 코드를 작성한다.

import firestore from "@react-native-firebase/firestore";

export const userCollection = firestore().collection("users");

export function createUser({id, displayName, photoURL}) {
  return userCollection.doc(id).set({
    id, displayName, photoURL
  });
};

export async function getUser(id) {
  const doc = await userCollection.doc(id).get();
  return doc.data();
}

firestore().collection() 함수로 컬렉션 래퍼런스를 만들어 주었다. 이 컬렉션 래퍼런스에는 특정 값을 조회, 등록, 삭제하는 메서드가 구현되어있다. 

createUser 함수는 문서에 주어진 정보들을 설정해 저장하고, getUser는 고유 ID를 가지고 있는 문서를 조회해 그 정보를 반환한다.

컬렉션 래퍼런스에는 add라는 메서드가 있어서 이 메서드를 사용하면 고유 ID를 Firestore에서 자동으로 생성해주는데, 위 코드 처럼 직접 입력해서 사용할 수도 있다.

 

이제 이렇게 구현한 코드를 불러와서 사용하기만 하면 된다.

아래 코드는 이 전 글에서 만들었던 signIn 라이브러리를 사용한다.

import React, { useState } from "react";
import { signIn } from "../lib/auth";
import { getUser } from "../lib/users";

function SignInScreen({navigation, route}) {
	
  const [form, setForm] = useState({
    email: "",
    password: "",
    confirmPassword: "",
  });
  
  const signIn = async () => {
    const {email, password} = form;
    const info = {email, password};
    try {
      const {user} = await signIn(info); // 로그인
      const profile = await getUser(user.uid); // 프로필 조회
      if (!profile) { // 저장된 프로필이 없다면 
        navigation.navigate("SetupProfileScreen", {uid: user.uid}); // 프로필 입력 화면으로 이동
      }
    } catch (e) {
      Alert.alert("로그인 실패", "로그인에 실패하였습니다.");
    }
  }

  return ( ... );
}

export default SignInScreen;

프로필 등록 화면에서는 위에서 구현한 createUser를 사용하여 Firestore에 회원 프로필을 등록한다.

import React, { useState } from "react";
import { useNavigation, useRoute } from "@react-navigation/native";
import {createUser} from "../lib/users";
import { signOut } from "../lib/auth";

function SetupProfileScreen() {
  const [displayName, setDisplayName] = useState("");
  const navigation = useNavigation();
  const {params} = useRoute();
  const {uid} = params || {};

  const onSubmit = () => {
    createUser({ // 회원 프로필 생성
      id: uid,
      displayName,
      photoURL: null,
    });
  };

  const onCancel = () => {
    signOut();
    navigation.goBack();
  };

  return ( ... );
}

...

export default SetupProfileScreen;

displayName 값을 입력받아 onSubmit을 실행하고 Firestore Database에 접속해보면 등록된 프로필을 확인할 수 있다.