학습내용

• 게시글 작성
• 게시글 수정

게시글 작성

posts.js

export const addPost = async (newPost) => {
  await addDoc(collection(dbService, "posts"), newPost);
};

async는 자동으로 Promise를 반환한다.

async/await를 사용하지 않고 바로 return을 쓰는 방법도 있다. 단, 이 경우 작업이 완료 되기 전에 렌더링이 될 수도 있다.

Post.jsx

  const { isLoading, mutate: add } = useMutation(
    ["addPost", newPost],
    (body) => addPost(body),
    {
      onSuccess: () => {
        console.log("게시글 작성");
      },
      onError: (error) => {
        console.log("error", error);
      },
    }
  );

  if (isLoading) {
    return <PostBtnInactive>글쓰기</PostBtnInactive>;
  }

  const onAddPost = async () => {
    try {
      await add(newPost);
      navigate("Tabs", { screen: "Main" });
    } catch (error) {
      console.log("error", error);
    }
  };

mutate는 isLoading, error처럼 useMutation이 갖고 있는 속성 중 하나이기 때문에 리덕스처럼 복잡한 로직을 사용하지 않고도 Create를 구현할 수 있다.

나에게 있어서 CRUD의 기준은 리덕스이기 때문에 mutate 역시 리덕스처럼 CUD에 관한 별도의 로직이 있을 거라고 생각해 이 부분에서 많이 헤맸다... (강의를 아직 다 듣지 않은 탓)

게시글 삭제

posts.js

export const deletePost = async (id) => {
  await deleteDoc(doc(dbService, "posts", id));
};

addDoc의 경우 컬렉션을 직접 생성하기도 하므로 collection을 사용해야 하지만, deleteDoc은 컬렉션 안에 있는 특정한 문서(id)를 삭제해야하기 때문에collection이 아닌 doc을 사용한다.

MainList.jsx

  const { isLoading: isLoadingDeleting, mutate: del } = useMutation(
    ["deletePost", item.id],
    (body) => deletePost(body),
    {
      onSuccess: () => {
        console.log("삭제 완료");
      },
      onError: (error) => {
        console.log("error", error);
      },
    }
  );

  const onDeletePost = async () => {
    Alert.alert("포스트 삭제", "정말 삭제하시겠습니까?", [
      { text: "취소", style: "destructive" },
      {
        text: "삭제",
        onPress: async () => {
          try {
            await del(item.id);
          } catch (error) {
            console.log("error", error);
          }
        },
      },
    ]);
  };

원래는 mutate: delete로 썼었는데 계속 delete가 undefined로 나와서 혹시나 하고 이름을 바꿨더니 잘 작동한다. 이것도 예약어 같은 건가 보다....