우리는 이제 실시간으로 쓰고 지울 수 있지만 우리가 원할 때만 실시간으로 사용할 수는 없을까요.
예를 들어 인스타그램 피드를 누군가가 추가시키고, 지우고, 수정한 댓글들을 실시간으로 보고 싶지 않을 수도 있습니다.
이전 포스트까지 한 내용은 채팅에서는 매우 유용할겁니다. 누군가 무언가 수정하고 지우고 하는것을 모두 실시간으로 보여주니까요.
하지만 이것을 원하지 않는 경우도 있습니다. 모든 페이지, 모든 요소들이 실시간일 필요는 없습니다.
만약 트윗을 잘못 작성해서 수정해야하거나 지우는 경우 모든 곳에서 그게 실시간으로 사라지지 않는 경우도 있습니다.
따라서 일단 트윗을 수정하고 지우는 것을 해보겠습니다.
이전에는 Twitt을 Home.js에서 보여줬지만 이제 새로운 component로 만들어야 합니다.
그 이유는 twitt component의 크기를 키울 필요가 있고 수정과 업데이트가 가능하도록 해야합니다.
따라서 새로운 Twitt.js를 components에 만들어줍니다. 그 후에 간단하게만 적어두고
Home.js의 트윗부분을 가져옵니다.
일단은 이렇게 최대한 간단하게 작성해줍니다. 그리고 Home.js를 다음처럼 수정해줍니다. 물론 위의 import도 작성합니다.
그리고 페이지를 확인해보면
정상적으로 출력됩니다. 그리고 Twitt에 버튼을 하나 만들겁니다. 하나는 Delete Twitt가 되고, 다른 하나는 edit Twitt가 됩니다.
이제 우리가 필요한 건, 이 Twitt을 내가 만들었는지 아닌지 알아내는 것 입니다. 이 Twitt을 다른 누군가에 의해서 만들어진걸 수 도 있기 때문입니다.
우리는 위에서 createUser를 만들어 두었습니다. 그리고 Home은 prop로 userObj을 가지고 있습니다.
따라서 Twitt은 isEditer라고 부르는 prop을 하나 더 가지면 구현할 수 있을 겁니다.(prop의 이름은 상관없음)
그리고 우리는 userObj를 App.js로부터 받고 있기 때문에 누가 로그인 했는지 알 수 있습니다. 따라서 userObj의 uid(로그인된 사용자)를 가져와서 비교하면 됩니다.
이 이후에 Twitt에도 isEditor를 주어서 isEditor가 true인 경우에만 이 버튼들을 볼 수 있게 해줍니다.
그럼 이제 메인페이지를 확인해봅시다.
그리고 하나 더 트윗해보겠습니다.
역시 버튼이 나옵니다. 이제 Test Twitt의 firestore의 아이디를 바꿔봅시다. 안의 값을 임의로 바꿔봅시다.
그럼 메인페이지를 보겠습니다.
Hello 밑에 버튼 2개가 사라졌습니다. 로그인된 사용자와 트윗 작성자가 일치하지 않기 때문입니다.
이제 우리가 로그인한 사용자 일때 해당 트윗이 우리가 작성한 것인지 아닌지를 알 수 있게 되었습니다.
