[React] React 앱에서 firebase DB 조회 하기 CRUD

제작중인 개인 프로젝트 앱에서 커뮤니티 페이지가 필요하여 DB 구성을 해야되는데

직접 서버만들어서 배포할 만큼의 사이즈가 아니라고 판단이 되어서 db를 firebase로 사용하기로 했다.

 

Firebase의 장점과 단점

GPT 답변

이 글을 요약 설명하자면,

결론적으로 엄청나게 빠르게 DB를 구축할 수 있으며, 실시간으로 작동한다.

우리가 서버를 만들고 배포하는 것이 쉽지많은 않다

클라우드 서버를 만들어서 서버를 배포한다고 가정했을때, 서버를 구성하고 DB를 구축하고 (이미 여기서 시간 너무 듬)

이후에 클라우드 서버 AWS 혹은 NCP(Naver Cloud Platform) 등등.. 여러 클라우드 서비스를 사용했을때

들어가는 시간이 너무 많이 들어간다..

하지만 이번에 firebase 만들어 보면서 너무 간단하고 쉽구나 라고 생각했다.

실제로 서버를 만들고 앱에 적용시키기 까지 거짓말 안하고 1시간 걸렸기 때문이다. 완전 처음 해봤는데도..

이렇게 강력하고 좋은 서비스이지만 단점이 있다면,

제한된 요청 수와(무료 한정), 유료로 전환했을때 클라우드 서비스에 비해 20% 더 비싼 가격이 책정된다고 한다.

그래서 간단한 프로젝트 및 call수가 적은 프로젝트를 빠르고 쉽게 개설하고 만들어 나가기에 좋은 방법이라 생각한다.

 

firebase를 연동하는 과정을 다룬 글은 많으니 거두절미하고 바로 react에서 CRUD 하는법을 작성하겠다.

Read

 

 

 

 

 

// firebase db 컬렉션 가져옴
const boardCollectionRef = collection(db,'notice-board')

const CommunityPage: React.FC = () => {
    const [boardData, setBoardData] = useState<setBoardData[]>([])

    useEffect(() => {
        // firebase db collection 조회
        const getFirebaseBoardDb = async () => {
            const boardData = await getDocs(boardCollectionRef)

            const mapData = boardData.docs.map((doc) => {
                return doc.data()
            })
            if(typeof mapData === 'object'){
                setBoardData(mapData)
            }
        }
        getFirebaseBoardDb()
    }, []);

    return (
        <div>
        </div>
    );
}

export default CommunityPage;

boardCollectionRef로 컬렉션을 불러와서 조회합니다

getFIrebaseBoardDb 는 비동기로 동작하며 doc.data()로 데이터를 불러옵니다

// firebase db 컬렉션 가져옴
const boardCollectionRef = collection(db,'notice-board')

const CommunityPage: React.FC = () => {
    const [boardData, setBoardData] = useState<setBoardData[]>([])

    useEffect(() => {
   		// where 조건이 들어간 조회
        const fetchBoardData = async () => {
            try{
                const q = query(
                    collection(db, 'notice-board'), where('__name__','==',(params.boardId))
                )
                const querySnapshot = await getDocs(q)
                const data: setBoardData[] = [];
                querySnapshot.forEach((doc)=>(
                    data.push({...doc.data()})
                ))
                console.log(data)
            } catch (err){
                console.error(err)
            }
        }

        fetchBoardData()
    }, []);

    return (
        <div>
        </div>
    );
}

export default CommunityPage;

이런식으로 조건을 걸어서 조회도 가능합니다.

Create,Delete,Update

// create board data
const createFirebaseBoardDb = async () => {
    await addDoc(boardCollectionRef, {title:"hello",content:"hello1"})
}

// update board data
const updateFirebaseBoardDb = async (collectionId:string,data:setBoardData) => {
    const selectDoc = doc(db,"notice-board",collectionId)
    const newBoardData = {title:data.title,content:data.content}
    await updateDoc(selectDoc, newBoardData)
}

// delect board data
const deleteFirebaseBoardDb = async (collectionId:string) => {
    const selectDoc = doc(db,"notice-board",collectionId)
    await deleteDoc(selectDoc)
}

나머지 로직들도 delete add update Doc 을 이용하여 가독성 좋은 코드로 작성할 수 있습니다