원문:https://blog.logrocket.com/getting-started-react-redux-firebase/
참고: https://velog.io/@cyongchoi/FireBase-%EB%A7%9B%EB%B3%B4%EA%B8%B0

위 링크에서 한글로 설명한 내용을 따라하니, 어렵지 않게 잘 되었다

다만 2022-09-05 일 기준 진행하다가 막혔던 부분들 작성

React 버전 설정

react-redux-firebase 라이브러리가 React 17까지만 지원이 된다.

1. React 17.0.0 버전 (18버전에선 안된다)
2. React-dom 17.0.0 버전

firebaseConfig 차이

databaseURL 필드가 없어도 된다
아마 projectId와 중복되는 내용이라 제거된 듯

const firebaseConfig = {
  apiKey: "AI...M",
  authDomain: "momo.firebaseapp.com",
  projectId: "momo",
  storageBucket: "momo.appspot.com",
  messagingSenderId: "1010101010",
  appId: "1:1010101010:web:eaffffffffffffffff",
  measurementId: "G-6R0000000Q",
};

Firebase 차이(V9)

Firebase가 V9 sdk가 되며 import 구문이 변경되었다. (index.js)

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

React-Router-Dom 차이

Swtich -> Routes로 변경

또한 Switch 내에 PrivateRoute를 사용할 수 없고 아래와 같이 Route 안에 다 넣어야 한다

이 때문에 나는 PrivateRoute.js 를 아예 제외하고 Todo 만 남겼다

import {Routes, Route} from "react-router-dom";

	<Routes>
        <Route path="/todos" element={<Todos />} />
        <Route path="/" element={<SignIn />} />
	</Routes>

useHistory -> useNavigate 로 변경

// SignIn.js

import React from "react";
import { useFirebase } from "react-redux-firebase";
import { useNavigate } from "react-router-dom";

const SignIn = () => {
  const firebase = useFirebase();
  const navigate = useNavigate();

  const signInWithGoogle = () => {
    firebase
      .login({
        provider: "google",
        type: "popup",
      })
      .then(() => {
        navigate.push("/todos");
      });
  };
  return (
    <div>
      <h1>Sign In</h1>
      <button
        onClick={(event) => {
          event.preventDefault();
          signInWithGoogle();
        }}
      >
        Sign In with Google
      </button>
    </div>
  );
};
export default SignIn;