Firebase | 채팅 웹 애플리케이션 (7) 채팅 출력하기

1. database.js 작성

데이터를 읽어오는 getChats함수를 작성

export function getChats() {
  let chats = [];
  database.ref("chats").on("value", (snapshot) => {
    snapshot.forEach((row) => {
      chats.push(row.val());
    });
  });
  return chats;
}

 

2. Chat.js 수정

import { auth, database } from "../services/firebase";
import { getChats, sendChat } from "../helpers/database";

 

chats라는 상태값에 데이터를 담는다

  const [chats, setChats] = useState([]);

  const getChatList = () => {
    const chatList = getChats();
    setChats(chatList);
  };

 

chats테이블이 변경되거나 추가되면 getChatList가 콜백함수로 실행되어 실시간으로 화면이 업데이트 된다

  useEffect(() => {
    try {
      database.ref("chats").on("child_added", getChatList);
      database.ref("chats").on("child_changed", getChatList);
      scrollToBottom();
    } catch (error) {
      console.log(error);
    }
  }, []);