트위터 클론코딩 - CRUD 1

CRUD 기능을 만들기 앞서 Home.js에 간단한 form을 만들어주고 firebase에서 db 설정을 하겠다.

firebase 콘솔에가서 탭 중에 Cloud Firestore 클릭 후 설명에 따라 만들어 주면 된다.

그 다음 로컬에 fbserver.js에 가서 필요한 모듈을 불러온다.

 

import "firebase/firestore";
export const dbService = firebase.firestore();

 

 

 

그럼 db는 만들어졌고 firebase db는 noSQL이다. 이 것은 Collection과 Documents를 가지고 있는데 Collection은 폴더, Documents는 파일과 같다.

 

Create

---

input창에 입력후 Gweet 버튼을 누르면 db에 전송할건데 어떤 정보들을 어떤식으로 전달을 해주느냐 

 

input에는 onChange 함수에 이벤트 처리로 gweet이란 state에 값을 전달해주고

onSubmit 함수에서는 db에 input 값들은 전달해줄건데 gweets 이란 collection에 add( ) 프로퍼티로 객체를 추가해준다.

객체 키값으로는 input text값, 만든시간, 만든사람이고 만든사람은 아래에서 설명 하겠다.

그렇게 값을 db로 보내고 setGweet("")을 해줘 gweet 값을 초기화 해준다.

 

  const onChange = (e) => {
    setGweet(e.target.value);
  };
  const onSubmit = async (e) => {
    e.preventDefault();
    await dbService.collection("gweets").add({
      text: gweet,
      createAt: Date.now(),
      creatorId: userObj.uid,
    });
    setGweet("");
  };

 

만든사람의 정보는 App.js에서 받아온다. App.js에서 .onAuthStateChange( ) 메소드로 user값을 받아와 user값에 따라 로그인 상태인지 아닌지를 판별해주었는데 여기서의 user값을 userObj란 state를 하나 더 만들어 넣어준다.

 

그 값을 App.js >> AppRouter.js >> Home.js 까지 props로 전달해준 뒤에 Home.js에서 onSubmit( )이 호출되면 같이 collection에 넣어주는 것이다.

 

useEffect(() => {
    authService.onAuthStateChanged((user) => {
      if (user) {
        setLoggedIn(true);
        setUserObj(user);
      } else {
        setLoggedIn(false);
      }
      setloading(true);
    });
  }, []);

 

Read

---

db에 있는 정보를 리렌더링 없이 바로 가져오는 법은 collection 메소드 중 onSnapShot( )이란 메소드를 사용하면 된다.

Home.js에서 useEffect 훅을 활용해서 화면이 렌더링 될 때 onSnapShot( ) 메소드를 호출 해주면 db에 변동이 일어날때마다 메소드가 호출 된다.

 

dbGweets이란 state를 초기값을 배열로 만들고 onSnapShot 메소드로 받아오는 값을 map으로 변형하여 을 gweetArray란 변수에 할당 해준다.

...docs.data( ) << 아까 넣어줬던 객체 값들

 

const [dbGweets, setdbGweets] = useState([]);

  useEffect(() => {
    dbService.collection("gweets").onSnapshot((Snapshot) => {
      const gweetArray = Snapshot.docs.map((docs) => ({
        id: docs.id,
        ...docs.data(),
      }));
      setdbGweets(gweetArray);
    });
  }, []);

 

그렇게 얻은 값은 또 map으로 렌더링 해주면 된다!

 

      <div>
        {dbGweets.map((gweet) => (
          <div key={gweet.id}>
            <h4>{gweet.text}</h4>
          </div>
        ))}
      </div>