React Native에서 Firebase 연동하는 법

React Native 앱에 Firebase를 연동하여 인증과 데이터베이스 기능을 사용하는 방법을 알아보겠습니다. Firebase 인증 설정과 Firestore 데이터베이스 활용법을 알아보며 Firebase의 강력한 기능을 확인해 보겠습니다.

 

Firebase와 React Native의 조합이 필요한 이유

모바일 앱을 개발하면서 항상 고민하는 부분은 백엔드와의 연동입니다. 사용자의 데이터를 안전하게 저장하고, 인증을 통해 사용자에게 맞춤형 서비스를 제공하는 것은 현대 앱 개발의 핵심입니다. 이런 백엔드 작업은 매우 부담스러울 수 있고, 특히 개인 개발자에게는 더더욱 큰 산처럼 느껴지는 부분입니다. 하지만 Firebase가 소개되면서 이런 고민이 많이 해결되었습니다.

Firebase의 장점

Firebase는 구글에서 제공하는 백엔드 서비스로, 인증, 데이터베이스, 스토리지 등 앱 개발에 필요한 대부분의 기능을 제공해줍니다. 특히, 서버 설정이 필요 없고 대부분의 작업이 클라우드에서 처리되기 때문에 백엔드 구축에 대한 부담이 크게 줄었습니다.

React Native와 Firebase의 시너지

React Native와 Firebase의 조합은 개발 시간을 대폭 줄여줍니다. 프론트엔드와 백엔드를 연결하는 작업이 간단해지고, 다양한 플랫폼에서도 손쉽게 인증과 데이터 저장 기능을 활용할 수 있습니다. Firebase의 크로스 플랫폼 지원 덕분에 iOS와 Android에서 동일한 코드로 인증 및 데이터 처리를 구현할 수 있습니다.

 

Firebase 연동 준비하기

Firebase 프로젝트 생성

먼저, Firebase와 React Native 앱을 연동하기 위해 Firebase 콘솔에서 프로젝트를 생성해야 합니다. Firebase Console에 접속하여 새로운 프로젝트를 만들고, 해당 프로젝트에 iOS와 Android 앱을 추가합니다. 각 플랫폼에 맞는 설정 파일(GoogleService-Info.plist와 google-services.json)을 다운로드하여 프로젝트에 추가해야 합니다.

React Native Firebase 설정

Firebase를 React Native와 연동하려면 react-native-firebase 패키지를 설치해야 합니다. 다음 명령어를 통해 설치할 수 있습니다.

npm install @react-native-firebase/app

 

그 후, 인증과 데이터베이스 모듈을 추가로 설치합니다.

npm install @react-native-firebase/auth @react-native-firebase/firestore

 

설치 후에는 iOS와 Android 각각의 설정 파일을 프로젝트에 포함시키고, 네이티브 설정을 진행합니다. 처음 Firebase 설정을 진행할 때, iOS의 경우 pod install을 실행하는 것을 잊지 말아야 합니다.

 

Firebase 인증 기능 활용하기

이메일/비밀번호 인증 설정

이메일과 비밀번호 인증은 Firebase에서 가장 기본적인 인증 방식입니다. 이를 설정하려면 Firebase 콘솔에서 인증 섹션으로 이동하여 이메일/비밀번호 옵션을 활성화해야 합니다. 그런 다음, 앱에서 다음과 같은 코드를 사용하여 사용자를 인증할 수 있습니다.

import auth from '@react-native-firebase/auth';

// 사용자 등록
const signUp = async (email, password) => {
	try {
		await auth().createUserWithEmailAndPassword(email, password);
		console.log('User account created & signed in!');
	} catch (error) {
		console.error(error);
	}
};

// 사용자 로그인
const login = async (email, password) => {
	try {
		await auth().signInWithEmailAndPassword(email, password);
		console.log('User signed in!');
	} catch (error) {
		console.error(error);
	}
};

 

이 코드를 통해 사용자는 앱 내에서 계정을 생성하거나 로그인할 수 있게 됩니다.

 

Firebase 데이터베이스 연동하기

Firestore 데이터베이스 소개

Cloud Firestore는 Firebase의 NoSQL 클라우드 데이터베이스로, 실시간 데이터 동기화와 쉬운 사용성이 큰 장점입니다. 앱에서 사용자의 정보를 저장하고, 업데이트가 필요할 때마다 실시간으로 변경 사항을 반영하는 용도로 사용하기에 좋은 Firestore입니다.

데이터 쓰기와 읽기

Firestore에 데이터를 쓰고 읽는 것은 간단합니다. 예를 들어, 사용자의 이름과 나이를 저장하고 조회하는 코드입니다.

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

// 데이터 저장하기
const addUser = async (name, age) => {
	try {
		await firestore().collection('Users').add({
			name: name,
			age: age,
		});

		console.log('User added!');
    } catch (error) {
		console.error(error);
	}
};

// 데이터 읽기
const getUsers = async () => {
	try {
		const users = await firestore().collection('Users').get();
		users.forEach(doc => {
			console.log(doc.id, '=>', doc.data());
		});
	} catch (error) {
		console.error(error);
	}
};

 

저는 사용자의 프로필 정보를 Firestore에 저장하고, 이를 조회해 사용자 화면에 표시하는 기능을 구현했던 적이있는데, Firestore의 실시간 업데이트 기능 덕분에 사용자 간의 정보가 신속하게 공유될 수 있어서 상당히 만족스러웠습니다.

실시간 데이터 업데이트 활용법

Firestore의 큰 장점 중 하나는 실시간 데이터 업데이트 기능입니다. 데이터가 변경될 때마다 자동으로 UI를 업데이트할 수 있기 때문에 사용자 경험을 극대화할 수 있습니다. 다음과 같은 방법으로 실시간 데이터를 구독할 수 있습니다.

const subscribeToUsers = () => {
	return firestore().collection('Users').onSnapshot(querySnapshot => {
		querySnapshot.forEach(doc => {
			console.log(doc.id, '=>', doc.data());
		});
	});
};

 

이 코드는 데이터베이스의 변경 사항을 자동으로 반영하여 최신 데이터를 사용자에게 제공합니다. 실시간 동기화는 특히 채팅 앱이나 소셜 미디어 같은 기능에 활용하기에도 매우 유용합니다.

 

마무리하며

React Native에서 Firebase를 연동하는 것은 백엔드에 대한 부담을 줄이고, 빠르게 앱을 개발할 수 있는 효율적인 방법입니다. Firebase 인증과 Firestore 데이터베이스를 통해 사용자를 안전하게 관리하고, 데이터를 실시간으로 동기화할 수 있습니다. 이 글을 통해, Firebase를 적절히 활용해 더 나은 사용자 경험을 제공하는 앱을 개발하는데 도움이 되길 바랍니다.