파이어베이스 X 리액트 - CRUD구현(2)

이제 수정&삭제 기능을 만들어보겠다.

파이어 베이스에서 수정&삭제는 진짜 정말 굉장히 쉽다.

 

참고할 공식 docs는 

firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference#update

DocumentReference | JavaScript SDK  |  Firebase

firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference#delete

DocumentReference | JavaScript SDK  |  Firebase

이렇게 두 개가 되시겠다!

 

여기서 doc이라는 매서드는 documentPath를 요구하는데, 

 

우리가 수정&삭제를 구현하려면 이 documentPath만 알면 그 위에 

. delete()나

. update()를 

사용해서 간단하게 CRUD를 구현할 수 있다.

 

그래서 onDelete라는 함수를 만들어서,

 

이런 식으로 비동기 처리를 해서 delete를 구현하였다.

이 window.confirm이라는 것은 js내장 함수인데,

 

이런 경고창(?) 알림 창 같은 거를 뜨게 해 준다.

그래서 확인을 누르면 result에 값이 true로 바뀌면서 조건부로 if(result)해서 

dbService에 삭제 기능을 await(비동기 처리) 해주었다.

 

이 삭제 기능을 구현하였는데, 수정은 삭제랑 다를게 없다.

삭제기능을 만들었다면 수정은 손쉽게 구현할 수 있다.

 

이렇게 update()에 객체 파라미터를 받게 되는데, text라는 필드의 값을 newContent(수정의 input value)로 업데이트해줌으로써, 

 

이렇게 간단한 C_create R_read U_update D_delete를 구현해보았다.

 

원래 이런 거를 개인 프로젝트로 진행한다면, DB설계에서 서버 구현하는 거까지 정말 많은 노동력을 요구하는데,

파이어 베이스를 사용해서 리액트 앱에 적용하니까 정말 이래도되나 싶을 정도로 쉬웠다.

 

한번 리액트랑 파이어베이스를 제대로 활용해서 

프로젝트를 한번 진행해보고 싶다.