FireBase, React를 활용한 트위터 클론코딩🧑‍💻

---

오늘 완료한 목록
1. 이 트윗 쓴 사람 누구여
2. 실시간 데이터베이스로 트윗 목록 화면에 나타내기
3. 후반 코드 작업을 위한 컴포넌트 분리 및 트윗 삭제 및 수정 권한 부여
4. 트윗 삭제 및 수정 기능 ~ing

---

1. 이 트윗 쓴 사람 누구여

app.js

const [userObj, setUserObj] = useState(null); 
// 로그인 정보관리를 위한 useState
useEffect(() => {
    auth.onAuthStateChanged((user) =>{
      if(user){
        setIsLoggedIn(true);
        setUserObj(user);
      }else{
        setIsLoggedIn(false)
      }
      setInit(true);
    });
  }, []);

return (
    <>
  {init ? <AppRouter isLoggedIn = {isLoggedIn} userObj={userObj} /> : "Initialzizing.."} 
  {/* userObj를 AppRouter을 이용하여 보냄 */}
  <footer>&copy; {new Date().getFullYear()} Nwitter</footer>
   </>
  )

트윗의 아이디를 저장하지 않으면 누가 어떤 트윗을 썼는지 알 수 없기 때문에
로그인 정보관리를 위해 useState를 활용하여 userObj함수를 만들었다. 그리고 if문을 이용하여
만약 user라면 userObj함수를 이용하여 id를 내보내게 했다.
그리고 내가 app.js에서 만든 userObj함수를 다른 곳에서도 쓰기 위해
AppRouter을 통해 보냈다.

보면 creatorID가 좀 많이 칠해져서 안보이지만 아이디가 동일하다.

---

2. 실시간 데이터베이스로 트윗 목록 화면에 나타내기

home.js

전)

const [nweets, setNweets] = useState([]); 
//  트윗들을  상태로 받아서 보관해야하기 때문에 배열로 usestate 생성
const getNweets = async ()=> {
        const q = query(collection(dbService,"nweets"));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
        const nweetObj = { //nweetObj => 트윗 내용 
            ...doc.data(), 
            id:doc.id,
        } 
         setNweets(prev => [nweetObj,...prev]);   
        });

후)

const [nweets, setNweets] = useState([]);
//  트윗들을  상태로 받아서 보관해야하기 때문에 배열로 usestate 생성
useEffect(() => {
        onSnapshot( 
        query(collection(dbService, "nweets"), orderBy("createdAt", "desc")),
        (snapshot) => {
        const nweetArray = snapshot.docs.map((doc) => ({
        id: doc.id, 
        ...doc.data(), 
        }));
        setNweets(nweetArray);
        }
        );
        }, []);

실시간으로 트윗 목록을 보여주기 위해서 먼저 기존에 쓰던 구조를 갈아엎었다..ㅎㅎ
기존에 쓰던 getNweets를 없애고 파이어베이스의 onSnapshot 함수를 이용했다.
이 함수는 정말 너무너무 유용했는데 이 함수 하나로 실시간 데이터베이스 데이터를 불러올 수 있었다.

자세한 설명하자면, onSnapshot함수는 모든 스냅샷을 반환한다.
그렇게 받은 snapshot에서 원하는 데이터만 뽑기 위해서 map함수를 사용했다.
전에 있던 코드는 forEach함수를 이용하여 순환할 때마다 setNweets함수를 실행했어야 했지만
map함수를 이용하여 순회하면서 받은 배열을 반환하기 때문에 setNweet함수에 단 1번만 배열을 전달하면 되서 훨씬 효율적이다!

---

3. 후반 코드 작업을 위한 컴포넌트 분리 및 트윗 삭제 및 수정 권한 부여

점점 코드를 적어나갈 수록 home.js의 컴포넌트에 추가해야한다. 그렇게 되면
코드의 덩치도 커지고 보기에도 안 좋기 때문에 컴포넌트를 분리했다.
그렇기 때문에 Nweet.js로 별도로 트윗용 컴포넌트를 관리할 수 있는 파일을 만들었다.

Nweet.js

import React from "react";

const Nweet = ({nweetObj, isOwner}) =>{
    }
    return (
    <div>
        <h4>{nweetObj.nweet}</h4>
        {isOwner && (
            <>
                <button>Delete tweet</button>
                <button>Edit Nweet</button>            
            </>
        )}
    </div>

    );
};

export default Nweet;

기존의 home의 컴포넌트와 다른 것은 home 컴포넌트의 map 함수에서 반환하는 nweetObj 배열을
프롭스로 받는다는 것만 다르다.
Nweet 컴포넌트를 만들어 삭제와 수정을 위한 버튼을 만들었다.

home.js

import Nweet from "components/Nweet";
<div> 
        {nweets.map((nweet) => (
// map 함수를 이용하여 nweets 배열을 순회하면서 jsx를 반환하게 만들어서 트윗 배열들을 웹에 나타냄.
        <Nweet 
        key={nweet.id} 
        nweetObj={nweet}
        isOwner={nweet.creatorId === userObj.uid}
         // isOwner  nweet.creatorId === userObj.uid가 같아야 권한을 줄 수 있게 설정.
        />
            ))}
    </div>

이제 home.js에서 위에서 만든 nweet컴포넌트를 사용하기 위해 import 했고
nweet 컴포넌트를 입력했다.

그리고 수정 및 삭제 권한을 저 트윗을 쓴 사용자만 할 수 있게 하기 위해서 위에도 있지만 자세히 설명하면,
home.js에는

isOwner={nweet.creatorId === userObj.uid}

추가했고 Nweet.js에서 Nweet 컴포넌트에서 isOwner라는 프롭스도 받게 했다.
트윗 작성자의 아이디로 봤을 때

다른 사용자로 봤을 때

---

4. 트윗 삭제 및 수정 기능 ~ing

트윗 삭제기능을 만들기 위해서 함수하나만 현재 만들어놓은 상태다 ^^
nweet.js의 nweet 컴포넌트 안에 추가해줬다.

const onDeleteClick = () => {
        const ok = window.confirm("Are you sure you want to delete this tweet?");
        if(ok){
            //delete tweet
        }

이거는 뭐.. 창으로 진짜 삭제할거냐고 뜨게만 일단 해놨다

---

전체 코드

nweet.js

import React from "react";

const Nweet = ({nweetObj, isOwner}) =>{
    const onDeleteClick = () => {
        const ok = window.confirm("Are you sure you want to delete this tweet?");
        if(ok){
            //delete tweet
        }

    }
    return (
    <div>
        <h4>{nweetObj.nweet}</h4>
        {isOwner && (
            <>
                <button>Delete tweet</button>
                <button>Edit Nweet</button>            
            </>
        )}
    </div>

    );
};

export default Nweet;

home.js

import { dbService } from 'fbase';
import React,{useState, useEffect} from "react";
import {addDoc, collection,query, onSnapshot,orderBy} from "firebase/firestore";
import Nweet from "components/Nweet"

const Home = ({userObj}) => {
    const [nweet, setNweet] = useState("");
    const [nweets, setNweets] = useState([]); //  트윗들을  상태로 받아서 보관해야하기 때문에 배열로 usestate 생성
    
    useEffect(() => {
        onSnapshot( // OnSnapshot 함수를 이용하여 모든 스냅샷을 반환함.
        query(collection(dbService, "nweets"), orderBy("createdAt", "desc")),
        (snapshot) => {
        const nweetArray = snapshot.docs.map((doc) => ({
        id: doc.id, // map 함수를 이용하여 스냅샷에서 원하는 데이터만 뽑아서 배열화 시킨 후 화면에 나타냄.
        ...doc.data(), // 전에 사용했던 Foreach함수는 매 순회마다 setNweets를 사용해야하지만, map함수는 순회하면서 만든 배열을 반환하므로
                        // 반환한 배열을 1번만 setNweet함수에 전달하면 되기 때문에 훨씬 효율적이다.
        }));
        setNweets(nweetArray);
        }
        );
        }, []);


    const onSubmit = async (e) => {
        try{
        e.preventDefault();
        const docRef = await addDoc(collection(dbService, "nweets"),
            {
            nweet,
            createdAt: Date.now(),
            creatorId : userObj.uid, // db에 유저아이디 추가
        }); // 데이터베이스 생성 
        console.log("Document Written with Id:", docRef.id);
        }catch(error){
            console.log("Error adding document", error)
        }

        setNweet("");
    };
    const onChange = (event) =>{
        const {target : {value},
        }= event;
        setNweet(value);
    };
    console.log(nweets);

return (
 <>   
<div>
    <form onSubmit={onSubmit}>
        <input value={nweet} onChange={onChange} type = "text" placeholder ="what's on your mind" maxLength={120} />
        <input type="submit" value="nweet"/>
    </form>
    <div> 
        {nweets.map((nweet) => (
// map 함수를 이용하여 nweets 배열을 순회하면서 jsx를 반환하게 만들어서 트윗 배열들을 웹에 나타냄.
        <Nweet 
        key={nweet.id} 
        nweetObj={nweet}
        isOwner={nweet.creatorId === userObj.uid}
         // isOwner  nweet.creatorId === userObj.uid가 같아야 권한을 줄 수 있게 설정.
        />
            ))}
    </div>
</div>
</>
    );
};



export default Home;

App.js

import AppRouter from 'components/Router';
import {useState, useEffect} from "react";
import { auth } from "fbase";

 

function App() {
  
  const [init, setInit] = useState(false)
  const [isLoggedIn, setIsLoggedIn] = useState(auth.currentUser)
  const [userObj, setUserObj] = useState(null); // 로그인 정보관리를 위한 useState


  useEffect(() => {
    auth.onAuthStateChanged((user) =>{
      if(user){
        setIsLoggedIn(true);
        setUserObj(user);
      }else{
        setIsLoggedIn(false)
      }
      setInit(true);
    });
  }, []);

  return (
    <>
  {init ? <AppRouter isLoggedIn = {isLoggedIn} userObj={userObj} /> : "Initialzizing.."} 
  {/* userObj를 AppRouter을 이용하여 보냄 */}
  <footer>&copy; {new Date().getFullYear()} Nwitter</footer>

   </>
  )
}

export default App;

---

오늘 결론

알바하고 전공 중간고사 대체 보고서 쓰고 운동하느라 웹 공부를 많이 못했다..
그래도 짬내서 공부하고 블로그도 쓴 거에 의의를 두자..🥲