App.js는 기본적으로 모든 요소들의 위에 있습니다. 어플케이션은 authorization과 나머지 전부를 다루는 것이라 페이지를 다룰 때 유용하게 사용할 수 있습니다.
우선 App.js에 state를 하나 추가 해줍니다.
이전에 authService를 통해서 user의 정보가 바뀌는 경우에 로그인된 경우가 포함되어 있습니다. 따라서 user가 true인 경우에
setUserObj을 넣어서 userObj이 set되게 합니다. 다시 말하면 우리가 로그인한 경우에 우리가 로그인한 user를 받아서 setUserObj 해주는 겁니다. 그리고 나중에 우리가 필요한곳에 user를 사용할 것 입니다.
이후 이것을 AppRouter로 보냅니다.
그리고 Home.js의 Home에 userObj를 넘겨줍니다.
Router.js의 Home에도 userObj를 적어줍니다. 두 번에 걸쳐서 전달하긴 해도 비효율적인 편은 아닙니다.
이제 Home이 userObj prop를 갖게 되었습니다. 이제 우리는 누가 로그인했는지 알 수 있습니다.
Home.js에 userObj 콘솔을 찍어보면 다음처럼 나올겁니다.
뭔가 굉장히 많이 나옵니다. displayName, email, photoUrl, uid ...
우리가 여기서 원하는 것은 uid입니다. 따라서 데이터베이스에 데이터를 생성해주는 onSubmit에 다음 부분을 추가합니다.
그 후 콘솔을 찍어보면 uid를 알 수 있는데 여기서 나오는 uid는 사용한 작성자의 아이디를 가리킵니다.
아이디는 Firebase 프로젝트의 Authentication을 보면 나와있습니다.
이런식으로 말이죠.
이제 우리는 트윗을 생성하고, 업데이트하며, 삭제를 할 수 있어야 합니다.
Firebase 문서로 가서 CollectionReference를 보면 다양한 Methods 들을 볼 수 있습니다.
add, doc, get등 다양한 메소드가 있지만 여기서 우리가 사용할 것은 onSnapshot입니다.
기본적으로 onSnapshot은 실시간으로 데이터베이스의 변화를 알려줍니다.
사용방법은 이전에 우리가 user정보를 다룰 때 사용한 onAuthStateChanged에서 했던 걸 똑같이 데이터베이스에 사용하면 됩니다.
그래서 데이터를 받아오는 userEffect에 다음처럼 추가합니다.
이는 데이터베이스에서 뭔가를 하게 되면 알 수 있도록 해줍니다.
그 후에 트윗을 업데이트 하면 이렇게 콘솔에 찍히게 됩니다.
그리고 Home의 return 부분을 다음처럼 바꿔줍니다. 이는 위에서 twitt의 내용을 text로 넘겨주었기 때문입니다.
그러면 다음처럼 출력됩니다.
순서가 조금 이상할수가 있는데 이는 id값으로 정렬되기 때문에 이렇습니다.
Home.js에서 데이터를 받아오는 getTwitt은 조금 오래된 방식이므로 이를 지우고 다르게 바꿔 보겠습니다.
따라서 일단 getTwitt은 모두 지워줍니다.
그리고 위에서 onSnapshot을 이용한 메소드 내부에 다음처럼 입력합니다.
snapshot은 특이하게도 우리가 가진 query와 같습니다, 하지만 이건 docs를 가지고 있습니다.
그리고 docs를 살펴보면 다음처럼 출력됩니다.
여기서 살펴보면 8개의 documents, 8개의 twitt입니다. 이 말은 즉, 우리가 setTwitts를 이런식으로도 사용할 수 있습니다.
위의 twitts는 우리가 페이지를 불러올 때 snapshot에서 나오는 겁니다. 우리가 할수 있는건 기본적으로 full map을 만드는겁니다.
twitts의 배열입니다. 그러면 위에서 우리가 콘솔에 출력시킨 snapshot.docs의 map을 만들어 보겠습니다.
모든 doc은 objects를 반환할 건데 다음처럼 작성합니다.
그리고 콘솔을 한번 찍어보겠습니다.
이렇게하면 우리가 원하는 방식으로 포맷됩니다.
id, createAt, createUser, text.. 잘 실행됩니다. 이렇게 해도 되고 전에 사용한 forEach로 해도 되니 선택하면 됩니다.
하지만 이 방식은 forEach와는 다르게 re-render 하지 않아도 됩니다.
보다시피 이건 한번만 렌더되며 더 적게 re-render하기 때문에 더 빠르게 실행되도록 만들어 줄겁니다.
이제 Home의 setTwitts(TwittArray);를 입력해주겠습니다.
그리고 컬렉션을 모두 삭제해보겠습니다.
그럼 새로고침을 한 다음에 입력을 해보면
리프레쉬 하지않고 실시간으로 업데이트 됩니다. 물론 database, 즉 datastore에서도 마찬가지 입니다.
마찬가지로 datastore에서도 추가하면 바로 업데이트 됩니다.
수정, 삭제 모두 역시 실시간이며 어느쪽에서 접근하더라도 실시간으로 서로에게 반응합니다.
