• 저장된 데이터를 listener로 실시간 데이터를 받을 수 있다.

    Untitled

  • Add된 데이터를 Listener로 받기

    componentDidMount(){
    this.AddChatRoomsListeners();
  }

  AddChatRoomsListeners=()=>{
    let chatRoomsArray = [];
    this.state.chatRoomsRef.on("child_added",DataSnapshot=>{
      chatRoomsArray.push(DataSnapshot.val());
      this.setState({chatRooms:chatRoomsArray});
    })
  }

  • 렌더링 하기

    //<html> 부분
<ul style={{listStyleType:'none',padding:0}}>
     {this.renderChatRooms(this.state.chatRooms)}
</ul>

//react부분(js 동작부분)
renderChatRooms = (chatRooms)=>{
    return chatRooms.length > 0 &&
      chatRooms.map(room=>(
        <li key={room.id}>
          # {room.name}
        </li>
      ))
  }