REACT + FIREBASE 연결

1. firebase에 프로젝트를 만들어준다.

https://firebase.google.com/?hl=ko

2. 앱에 firebase를 추가해준다.

1.본인에게 해당하는 부분을 체크해준다.

2. 프로젝트 이름을 적어준다.

3. 해당 코드를 복사한 후 콘솔로 이동하기를 누른다.

3. 데이터베이스 만들기

1. 데이터베이스 만들기를 선택한다.
   
2. 데이터베이스를 만들어준다.
   
   
3. 규칙을 눌러 false를 true로 수정하고 게시하기를 누른다.

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write, update, delete: if true; // false -> true, update와 delete 추가
    }
  }
}

4. table을 만든다.(컬렉션ID = table)
   
5. 필드를 만들어준다. (필드 = column)
   

4. REACT 설정

1. react app을 만들어준다. --template typescript는 선택사항이다.

 npx create-react-app [프로젝트 이름 넣어주기] --template typescript

2. 해당 프로젝트로 이동 후 npm install firebase를 해준다.
   
3. src 파일 아래 firebase.ts를 생성해준 후 해당 코드를 작성한다.(해당 프로젝트의 root 경로에 추가해도 괜찮습니다!)
   

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore/lite'

const firebaseConfig = {
  // firebase 설정과 관련된 개인 정보
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);


export const db = getFirestore(app);

4. 프로젝트 아래 .env 파일을 생성한 후 발급받은 api 키를 넣어준다.
   

// 해당 코드를 복사해서 넣어주세요.
REACT_APP_FIREBASE_API_KEY = 값 넣어주기
REACT_APP_FIREBASE_AUTH_DOMAIN = 값 넣어주기
REACT_APP_FIREBASE_PROJECT_ID = 값 넣어주기
REACT_APP_FIREBASE_STORAGE_BUCKET = 값 넣어주기
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = 값 넣어주기
REACT_APP_FIREBASE_APP_ID = 값 넣어주기
REACT_APP_FIREBASE_MEASUREMENT_ID = 값 넣어주기

5. .gitignore에 아래 내용을 추가해준다.(api키가 유출되는 것을 방지하기 위함입니다.)

.env
.env.local
.env.development.local
.env.test.local
.env.production.local

6. 연결 제대로 되었는지 확인하기

import React, { useEffect, useState } from "react";
import styles from "../css/stylesheet.module.css";
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useLocation } from "react-router-dom";
// firebase의 db를 가져와줍니다.
import { db } from '../firebase';
// 문서 조회에 필요한 api
import {getDocs, collection,orderBy,query} from 'firebase/firestore/lite';


const QnaList = () => {


    const [language, setLanguage] = useState('en'); // Default to English
    const [data, setData] = useState<any>([]);
    const location = useLocation();
    const passedData = location.state;

    const handleLanguageToggle = (lang: any) => {
        setLanguage(lang);
    };


    useEffect(() => {
        getData();
    }, [passedData]);

  // 데이터 가져오는 함수 작성
  // 저는 db에 'qna'라는 컬렉션을 create_date라는 필드를 asc조회하여 가져오도록 하였습니다.
    const getData = async() => {
        const  dataList = await getDocs(query(
                                collection(db, "qna"), orderBy("create_date", "asc")));

        const realDataList = dataList.docs.map((d: any) => ({
            ...d.data(), id: d.id,
        }));

        console.log('payload', realDataList);
        setData(realDataList);
    }

    return <div className={styles.list_area}>
        <div className={styles.q_box}>
            <div className={styles.qnaListContainer}>
                <div className={styles.top_contents}>
                    <span className={styles.listTitle}>List</span>
                    <div className={styles.languageButtons}>
                    <button 
                            className={`${styles.langButton} ${language === 'lo' ? styles.active : ''}`} 
                            onClick={() => handleLanguageToggle('lo')}
                        >
                            LO
                        </button>
                        <button 
                            className={`${styles.langButton} ${language === 'en' ? styles.active : ''}`} 
                            onClick={() => handleLanguageToggle('en')}
                        >
                            EN
                        </button>
                    </div>
                </div>

            </div>
            <div className={styles.q_block_box}>
            <>
            
            {
                data.map((unit:any, index:any) => (
                <div className={styles.q_block} key={index}>
                    <div className={styles.titleContents}>
                        <span className={styles.title}>{unit.title}</span>
                        <div className={styles.divider}></div>
                        <span className={styles.contents}>{unit.contents}</span>
                    </div>
                    <div className={styles.dateAndIcons}>
                        <span>{unit.create_date}</span>
                        <span className={styles.checkIcon}>✓</span>
                    </div>
                </div>

                ))
            }
            </>
         
            </div>

         
        </div>
    </div>
}

export default QnaList;

저는 코드를 이렇게 작성해 뒀지만 데이터를 가져오는지 아닌지만 확인하실 경우 아래의 코드를 복사하여 사용하시면 됩니다! 그리고 데이터 추가, 수정, 삭제와 같은 api들과 관련한 사항은 공식문서를 확인해주시길 바랍니다!
🔗 https://firebase.google.com/docs/firestore?hl=ko

import { collection, getDocs } from "firebase/firestore";

const querySnapshot = await getDocs(collection(db, "생성한 table 이름"));
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

제가 잘못 알고 있거나 더 효율적인 코드가 있다면 불쌍한 중생에게 실력 성장을 하사하노라 하고 댓글 남겨주세요! 감사히 배우고 댓글 달아주신 분들의 적게 일하고 많이 벌기를 응원하겠습니다!