인프런 커뮤니티 질문&답변
작성한 질문수
firebase database에서 데이터 읽기&불러오기에 관한 내용
작성
·
394
0
const messageRef = firebase.database().ref("messages")
messageRef.child(roomId).on("child_added", DataSnapshot => messageArray.push(DataSnapshot.val()))여기 각 chatRoom에 담긴 메시지를 불러오는 코드에서 안 풀리는 부분이 있어서 질문 드립니다.
컴포넌트 처음 시작될때 chatRoom까지는 첫번째 chatRoom을 선택하는 것 까지는 되는데, 그 이후에 Messages 데이터가 읽어지지 않습니다. 그래서 해결책을 찾아보다가 어려움을 겪어서 질문을 드리게 되었습니다.
console로 체크하면서 코드를 체크해 보니, 두가지 정도로 원인이 발견되었습니다.
첫번째는, database를 불러오는 on()메소드에 관련된 원인입니다. on메소드에서 첫번째 인자를 'child_added'를 넣었는데, 이게 공식사이트 설명을 보니까, 지정된 경로의 하위 항목에 데이터가 새로 추가 때 데이터를 읽어내는 것 같거든요. 데이터가 추가될 때만 읽혀지고, 처음 컴포넌트 로딩때는 하위 항목을 다 읽어내지 않는 것 같습니다.
두번째는 setState에서의 문제입니다.
database에서 불러온 내용을 다시 변수에 담기 위해 setState를 사용할 때, state에 데이터가 담겨지는 시점과 컴포넌트에 데이터가 바인딩 되는 시점 간의 시간 간격이나 순서에 대한 문제입니다. 콘솔로 확인을 해보니 state에 데이터가 다 담겨지지 못하고, 컴포넌트가 렌더링이 시작되는 것 같았습니다.
제 나름대로 스스로 여러 구글링 검색을 해 보았지만 답을 찾지 못해서 도움을 요청드리고자 질문을 올리게 되었습니다.
혹여나 답변을 주실 수 있다면 부탁드리고 싶습니다.
감사합니다.
답변 1
0
안녕하세요.
제가 해결한 방법에 대해서 설명드리겠습니다.
저는 react-firebase-hooks라는 패키지를 설치해서 사용했습니다.
import { useList } from 'react-firebase-hooks/database'
const [snapshots, loading, error] = useList(chatRoomsRef);
...
...
<ul style={{ listStyleType: 'none', padding: 0}}>
{!loading && snapshots &&
snapshots.map((snapshot, key) => (
<li key={key}>
# {snapshot.val().name}
</li>
))}
</ul>다음과 같이 작성하면 함수형 컴포넌트로도 채팅방을 볼 수 있습니다.