파이어베이스 질문

[배해기]

파이어베이스 게시판이없어서 리액트로 사용하고있어서 여기 질문합니다.

현재 9버전으로 해보려다가 에러도많이나고 잘 안되길래 선생님의 강의따라 8버전으로 해보고있습니다.

근데 초반부터 좀 막혀버렸는데요..

데이터베이스에 있는 데이터를 가져왔는데
그 데이터들을 state에 담아서 사용할 수 있나요?

제가 test라는 state를 만들어서

forEach 안에서 setTest(doc.data()) 이런식으로 넣어보니 데이터가 여러개있는데 하나만들어갑니다.





데이터베이스 안에는 한 6~7개 데이터가 저런식으로 들어있는데 하나만 저렇게 출력이되더라구요

그래서 push를 사용해봤는데



이렇게 같은 데이터가 두개씩들어가서 12개가 출력이됩니다. 6개가 들어가야하는데

제가 자바스크립트를 잘 못써서 그런걸까요,,  어찌해야할까요,,?

데이터 추가하는 input과 버튼기능은 또 잘 구현이됐습니다,, 가져오는것만 문제네요

[codingapple]

반복문돌리면 array 데이터가 하나씩 출력됩니다 돌리지말고 집어넣읍시다

[배해기]

반복문을 돌리지않으면 t {_firestore: t, _delegate: t} 이러한상태로 출력이되는걸
제대로 된 자료출력을 할 수 있는 방법이 뭘까요..ㅠ?
반복문을 지우고

res만을 출력하면 t {_firestore: t, _delegate: t} 이게나오고
반복문 돌렸을 때 doc를 출력했을때도 t {_firestore: t, _delegate: t}이게 나오길래
똑같이 data()를 붙여봤는데
위 사진처럼 콘솔창에 res.data()를 출력해보니
Read.js:35 Uncaught (in promise) TypeError: res.data is not a function
이러한 에러가 나타나네요.. 함수가 아니라 에러가난다는거같은데
async를 사용해줘야하나요?

[codingapple]

아니면 var array = [] 만들고 forEach 반복문안에서 array.push(doc.data()) 해서 씁시다

[배해기]

말씀해주신것처럼 arr이라는 변수만들고 거기에 push해서 넣어봤는데 그래도 결과값이
만들어둔 test라는 state에 push해준것과 값이 동일합니다..

useEffect때문인가 싶어서 useEffect 사용안하고 해봤는데

데이터를 두번씩 가져오는걸 한번만 가져오는것에 차이만있을뿐 데이터가 담겨있는모습이 같아서
사용하는데 문제가생기는거같습니다..


보다시피 코드는 이렇게 작성되어있고


콘솔창에 출력이 저런식으로 됩니다 배열은 [] 이렇게되어있고 펼쳐보면 데이터가있긴한데
map함수로 사용이 불가능하게 되어있다해야할까요..?

보통의 배열안에 객체들이 담겨있는 데이터들은





여기처럼 테스트로 만들어본 배열객체처럼 저런식으로 출력이되야할거같은데

그게 되질않습니다.. 구글링해봐도 파이어베이스에 관한 자료가 막 잘나오지가않네요..
나오는 자료들도 똑같이 반복문안에서 push해서 사용을하던데 어떻게고쳐야할까요/..?

[codingapple]

useEffect안에 있는코드는 다른 코드보다 늦게 실행되어서 변수 출력했을 때 비어있을 뿐입니다 
변수에 저장은잘될걸요

[배해기]

구글링해보던중 해결했습니다..!
실시간반영이 되지않았던건지 기존에get().then() 으로 사용하던걸
onSnpashot으로 사용하는 블로그글을보고 사용해봤더니 해결됐습니다.!

[글쓴이]

글