React Twitter Clone (13) - 트윗 받기

김민석·2020년 9월 21일
0

React_Twiiter_Clone

목록 보기
13/17

이제 작성한 트윗들을 어떻게 가져올 것인지를 생각해야 합니다.
Home.js에 state를 하나 만들어 줍니다. 그리고 기본값은 비어있는 array로 합니다.

그리고 useEffect를 사용하여 컴포넌트가 mount될 때 dbService를 가져옵니다. 그리고 collection을 가져오면(get) 됩니다.

단 이 부분은 따로 빼서 개별적인 함수로 만들어야 합니다. 이렇게 하는 이유는 async를 써야 하기 때문입니다. 따로 빼서 함수를 만들어 준 다음에 useEffect에서 호출해서 사용하면 됩니다.

이렇게 한 다음 콘솔을 찍어보면 뭔가 값은 넘어오는데 우리가 알아보긴 힘들 겁니다.

공식문서의 get을 보면 QuerySnapshot을 리턴한다고 되어 있습니다.



QuerySnapshot은 docs, metadata, size, empty 등등 다양한 것을 가지고 있습니다.

forEach를 확인해보면 result로 QueryDocumentSnapshot, 그리고 이것을 클릭해보면


data가 있습니다.


이렇게 코드를 작성하고 콘솔을 찍어보면

정상적으로 작동합니다.

컴포넌트가 mount될 때, 우리는 getTwitts를 실행하고 getTwitts는 dbService를 불러와서 collection("Twitt")를 get(가져오는 것) 합니다. 그러면 이상한 것이 리턴되는데 그것이 우리가 원했던 데이터 "Twitts"이 아니라 QuerySnapshot 이라고 불리는 것 입니다.

QuerySnapshot은 다양한 것을 가지고 있습니다.

그리고 이중엔 document.data()가 있습니다.

dbTwitts안에 있는 모든 document에 대하여 setTwitts를 할 것인데 안에 값이 아닌 함수를 넣을 것 입니다.
모든 이전 Twitts에 대해, 배열을 리턴할 것이고 그 배열은 새로 작성한 트윗과 그 이전 것들입니다.

가끔 set이 붙는 함수를 쓸 때 값 대신에 함수를 전달할 수 있습니다. 그리고 함수를 전달하면 리액트는 이전 값에 접근할 수 있게 해줍니다.

dbTwitts안에 있는 모든 document에 대하여 (setTwitt에서) 함수를 사용하고 있는데, 리턴하는 것은 이건 implicit return 입니다. 배열을 리턴합니다.

이 배열에서 첫번째 요소는 가장 최근의 document이고, 그 뒤로 이전 document를 붙힙니다. 그럼 이제 저장후에 확인해보면

이런식으로 최근 순으로 트윗이 넘어오게 됩니다.
그리고 이것보다 더 나은 트윗을 보여줄 수 있는데 document.data() 대신에 Twitt 객체를 만들면 됩니다.

TwittObject는 document.data()를 가질 것이고, id도 주겠습니다.

이렇게하면 TwittObject에는 data와 id가 있습니다.
이건 spread attribute 기능이고 document.data() 데이터를 가져와서 풀어내는 겁니다.

확인하면 우리가 원한 id, createAt, twitt_clone이 모두 있습니다.
그럼 여기서 받아온값을 출력해야합니다. id값을 출력할려면

twitts(받아온 값)의 인덱스만큼 map으로 반복출력 해주면됩니다. 인자로는 twitt를 줘서 key 값으로 id를 주고 twitt의 id값을 출력해주면 됩니다.

profile
web development 주니어

0개의 댓글