[React] firebase 데이터 추가하기

위의 사진처럼 데이터를 작성하고 '등록'을 하는 경우에 firebase와 연동하여 데이터를 추가하고 싶었다.

그래서 관련된 firebase API를 생성해봤다.

addData API

export const addData = (songData) => {
    db.collection("songData")
        .add({
            songNae: songData.songName,
            singerName: songData.singerName,
            songLink: songData.songURL,
        })
        .then((docRef) => {
            console.log("DOcument written with ID : ", docRef.id);
            alert("데이터 등록 완료");
        })
        .catch((error) => {
            console.error("Error adding document : ", error);
            alert("데이터 등록 실패");
        });
};

• 'db'의 경우 import를 통해서 가져왔다.

1. db.collection을 통해서 추가하려고 하는 컬렉션을 찾는다.
2. .add({배열})을 이용하여 추가하려고 하는 데이터를 Request 형식에 맞춰서 작성한다.
3. .then((docRef) => {})을 이용하여 데이터의 추가 여부를 확인한다.
4. .catch((error) => {})을 이용하여 에러를 확인한다.

생각보다 간단하게 '추가'에 대한 API를 작성할 수 있었다.

이렇게 작성하고 만든 API를 아래와 같이 적용했다.

handleAddButtonClick 컴포넌트

  // 추가 버튼이 클릭되었을 때 입력된 내용을 확인하는 핸들러
const handleAddButtonClick = () => {

    if (!songData.songName || !songData.singerName || !songData.songURL) {
        alert("모든 필드를 채워주세요.");
        return;
    }
    const confirmationMessage = `데이터를 등록하시겠습니까?\n
    노래 제목: ${songData.songName}\n
    가수 이름: ${songData.singerName}\n
    영상 URL: ${songData.songURL}`;

    if (window.confirm(confirmationMessage)) {
        // 여기에 데이터 등록 등의 로직을 추가할 수 있습니다.
        addData(songData);
        alert("데이터 등록 완료");
        console.log("데이터 등록 완료!");
        navigator("/"); // 페이지 이동
    } else {
        console.log("데이터 등록 취소");
    }
};

• songData의 경우 함수 내에 선언되어 있다.
• addData(songData)로 사용하여 API를 불러온다.
  
  
  
  

결과 화면

이렇게 데이터를 입력한 뒤에 '등록하기' 버튼을 누르면 firebase에 정상적으로 데이터가 등록된 것을 볼 수 있다! 실제로 get하여 보여지는 페이지에서도 정상적으로 불러오는 것을 볼 수 있다.

오늘도 성장하는 개발자