파이어베이스 X 리액트

오늘은 파이어 베이스를 이용해서 간단한 리액트와의 연동 예제를 보여주도록 하겠다.

-본 글은 리액트 프로젝트와 파이어베이스 프로젝트를 생성했다는 가정하에 진행한다.

콘솔 창에 

npm install firebase

를 해주자.

 

그다음에 src디렉터리에 firebase.js이라든지 fbase.js라든지 자기가 알아볼 수 있을법한 파이어 베이스 파일을 만들어 주도록 하자.

 

먼저 firebase.js에 

import firebase from 'firebase/app';

를 해주고,

 

 

그 다음 파이어 베이스의 config를 initialize 해주기 위해 저기 firebaseConfig라는 값을 복사하고 아까 만든 firebase.js에 붙여 넣기 해준다.

그다음에 firebase.initializeApp(firebaseConfig)를 해주면 기본적인 파이어 베이스 세팅은 끝나게 된다.

 

먼저 Auth즉, 회원 관련해서 파이어 베이스 서비스를 이용하고 싶다면,

import 'firebase/auth';

 

이런 식으로 파이어 베이스. js에 추가한다.

그다음, 다른 컴포넌트에서 auth서비스를 이용할 수 있게 하기 위해서

export const authService = firebase.auth();

 

이런 작업을 해주면, 나중에 다른 컴포넌트에서 authService를 import 할 때는,

import { authService } from 'firebase'

이런 식으로 해주면 된다.

여기서 friebase 모듈과 firebase.js가 파일 이름이 헷갈리게 하지 않기 위해 되도록이면 firebase 말고 구별할 수 있는 이름을 사용하도록 하자.

 

이제 파이어 베이스 홈페이지에 들어가서

Authentication이라는 곳에 가서 Sign-In method라는 곳에서 자신이 사용할 로그인 방법들을 선택한다.

정말 많은 방법들이 있는데, 여기서는 구글 로그인을 예제로 해보겠다.

 

 

따로 설정을 해 줄 필요가 없다. 이렇게 사용 설정이 되면 구글 로그인 서비스를 이용할 준비가 된 것이다.

 

참고로 파이어 베이스는 공식 문서가 잘 정리되어있으므로 찾아보면 쉽게 알 수 있다.

 

이게 구글 로그인하는 공식 문서이다.

이제

new firebaseInstance.auth.GoogleAuthProvider();

이런 식으로 해주고 저 값을 provider라는 변수에 담아주자.

그다음 

const data = await authService.signInWithPopup(provider);

이렇게 signInWithPopup이라는 메서드에 파라미터로 아까 생성해주었던 provider를 전달해주게 되면 우리가 잘 아는 팝업이 뜨고 그 팝업에 구글 로그인이 뜨게 된다.

 

이제 버튼 onClick속성에 저 구글 로그인을 함 수화시켜서 전달해주도록 하자.

그러면 잘 로그인이 되는 모습을 볼 수 있다.

 

파이어 베이스 로그인 정보는 

여기에 저장이 될 것이다.

 

이렇게 간단하게 리액트랑 파이어 베이스랑 연동하는 것을 해보았다.

이처럼 파이어 베이스는 서버가 없이 정말 간단하게 자동으로 다양한 서비스들을 제공하는 모습을 볼 수 있다.

 

다음에는 파이어 베이스로 블로그를 만들어 봐야겠다.