firebase Realtime Database 사용하기

firebase 초기설정이 되어있다면 Realtime Database 따로 설정이 필요 없다.

import { getDatabase, ref, onValue } from "firebase/database";
 let [data, setData]: any = useState([]);
 const db = getDatabase();
 const Ref = ref(db, "경로");

 useEffect(() => {
   onValue(Ref, (snapshot) => {
     data = snapshot.val();
     setData(data);
   });
 }, []);

onValue()를 사용해 이벤트를 관찰하고, 데이터가 변경될 때마다 다시 트리거되며, 하위 데이터를 포함하여 해당 위치의 모든 데이터를 포함하는 스냅샷이 이벤트 콜백에 전달된다.

실시간채팅 만들기

const db = getDatabase();
  const recentRef = query(ref(db, "chatting"), limitToLast(1));

  const [message, setMessage]: any = useState({
    avatar: "",
    content: "",
    type: "",
    nickname: "",
    date: "",
  });
  let lastMessage: any;
  let messageList: any = [];
  let [data, setData] = useState([]);

  useEffect(() => {
    onValue(recentRef, (snapshot) => {
      const data = snapshot.val();
      lastMessage = Object.values(data)[0];
      setMessage(lastMessage);
      messageList.push(lastMessage);
    });
    setData(messageList);
  }, []);

limitToLast(1) : 제일 마지막 데이터를 가져온다.
data.map()을 통해 데이터를 보여준다.

https://firebase.google.com/docs/database/web/read-and-write