✨ firestore setting

일단 firestore 프로젝트를 만들어보자.

test모드로 만들고 >>> 지역선택 >>> permission setting

내가 만드는 사이트는, 로그인 했든 안했든 데이터베이스 다 보이게하는 사이트니까, auth에서 빡빡하게 굴지 않는다.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
       allow read, write: if request.auth != null || request.auth == null;
    }
  }
}

그람 끝.

✨ JS file setting

	import React, { useState, useEffect } from "react";
	import { addDoc, collection, query, getDocs } from "firebase/firestore";
	import {dbService} from "../myBase";

	const Home = () => {
    	const [ew, setEw] = useState("");
    	const [ews, setEws] = useState([]);

    	const onSubmit = async(event) => {
        	event.preventDefault();
        	try {
            	const docRef = await addDoc(collection(dbService, "event"), {
            	ew,
            	createdAt: Date.now(),
            	});
            	console.log("Document written with ID: ", docRef.id);
        	} catch (error) {
            	console.error("Error adding document: ", error);
        	}
        	setEw("");
        }

    	const onChange = (event) => {
        	const {target:{value}} = event
        	setEw(value);
    	}

    	const getEws = async () => {
        	const q = query(collection(dbService, "event"));
        	const querySnapshot = await getDocs(q);
        	querySnapshot.forEach((doc) => {
        	const nweetObj = {
        		...doc.data(),
        		id: doc.id,
        	}
        	setEws(prev => [nweetObj, ...prev]);
        	});
        };

    	useEffect(()=> {
        	getEws();
        	console.log(ews)
    	},[])

    return(
        <>
            <form onSubmit={onSubmit}>
                <input value={ew} onChange={onChange} type="text" placeholder="how was our event?"/>
                <input type="submit" value="Ew"/>
            </form>
			<div>
                {ews.map((ew) => (
                    <div key={ew.createdAt}>
                        <h4>{ew.ew}</h4>
                    </div>
                ))}
            </div>
        </>)
}

export default Home;

코드보면 알겠지만, onSubmit랑 onChange 부분은 submit하기 위함이고

useEffect으로 firestore에 들어있는 데이터들을 불러오고 있다. 데이터'들'이기 때문에, 애초에 받을 때, Array로 받아야한다.
그리고 화면에 띄울때는 array에 map 써서 돌려돌려!

그럼 화면에, 이렇게 뜨는데,

두번뜨는건 index.js에서 <React.strictmode>때문이다.
그치만 deploy후 production mode에서는 해결되니까 노걱정