TIL : 최종프로젝트 6일차

주말동안 RTK-Query로 data를 받아오는 get요청 작업을 하고, 오늘은 data를 수정하고 삭제하는 작업을 했다.

get

//apiSlice.ts

getComment: builder.query<CommentType[], void>({
    async queryFn() {
        try {
          const commentQuery = query(
            collection(dbService, "comments"),
            orderBy("createdAt", "desc")
          );
          const querySnaphot = await getDocs(commentQuery);
          let comments: any = [];
          querySnaphot?.forEach((doc) => {
            comments.push({ id: doc.id, ...doc.data() } as CommentType);
          });
          return { data: comments };
        } catch (error: any) {
          console.error(error.message);
          return { error: error.message };
        }
      },
      providesTags: ["Courses"],
    }),
.
.
.
export const {
  useGetCommentQuery,
} = courseApi;

⬆︎ apiSlice.ts 파일에서 로직을 작성하고, 만들어진 hook을 export한다.

import { useGetCommentQuery } from "../redux/modules/apiSlice";
.
.
.
const { data } = useGetCommentQuery();
.
.
.
{data?.map((comment) => {
   return (
     <Comment
       key={comment.id}
       setModalOpen={setModalOpen}
       comment={comment}
     />
   );
})}

⬆︎ 사용하려는 파일에서 hook을 import한 뒤, 위와 같이 {}로 묶어서 data를 불러온다. return되는 부분에서 data에 접근하는 법은 동일하다.

update

//apiSlice.ts

updateComment: builder.mutation({
    async queryFn({ commentId, newComment }) {
        try {
          await updateDoc(doc(dbService, "comments", commentId), {
            comment: newComment,
          });
          return { data: null };
        } catch (error: any) {
          console.error(error.message);
          return { error: error.message };
        }
      },
      invalidatesTags: ["Courses"],
    }),

⬆︎ apiSlice.ts 파일에서 로직을 작성하고, 만들어진 hook을 export한다.

import {
  useUpdateCommentMutation,
} from "../../redux/modules/apiSlice";

const Comment = ({comment}:CommentProps) => {
.
.
.
  const [updateComment] = useUpdateCommentMutation();
  const [editComment, setEditComment] = useState<string | undefined>("");
  const updateCommentHandler = (id: string | undefined) => {
    updateComment({ commentId: id, newComment: editComment });
    setEdit(false);
  };
.
.
.
return (
  <AiOutlineEdit
     onClick={() => {
              setEdit(!edit);
              setEditComment(comment.comment);
            }}
     size={20}
     className="hidden sm:flex"
   />
  <div>
     <textarea
        className="border-2 resize-none px-2 py-1 w-full h-24"
        placeholder="댓글을 입력해 주세요"
        onChange={(event) => setEditComment(event.target.value)}
        value={editComment}
     />
     <button
         className="bg-gray-300 w-20 px-4 sm:px-5 py-1 rounded-xl mt-1 flex justify-center "
         onClick={() => updateCommentHandler(comment.id)}
     > 등록</button>
  </div>
  );
};

⬆︎ 로직이 담긴 hook을 import해오는 것 까지는 post와 동일하다. 하지만, 로직을 작성하는 부분에서 2개의 인수를 중괄호로 묶어서 작성했기 때문에 로직을 사용하는 부분에서도 updateComment({ commentId: id, newComment: editComment });와 같이 작성해야한다.

• 수정 시, input창에 수정 전 내용 불러오기

1. 수정버튼을 클릭했을 때, 수정할 comment를 관리하는 setEditCommet로 기존 comment내용을 editComment에 저장한다.
2. 입력하는 태그에 value를 editComment로 설정한다.

delete

//apiSlice.ts

deleteComment: builder.mutation({
    async queryFn(commentId) {
        try {
          await deleteDoc(doc(dbService, "comments", commentId));
          return { data: null };
        } catch (error: any) {
          console.error(error.message);
          return { error: error.message };
        }
      },
      invalidatesTags: ["Courses"],
    }),

⬆︎ apiSlice.ts 파일에서 로직을 작성하고, 만들어진 hook을 export한다.

import {
  useDeleteCommentMutation,
} from "../../redux/modules/apiSlice";
.
.
.
  const [deleteComment] = useDeleteCommentMutation();
  const deleteCommentHandler = (id: string | undefined) => {
    let confirm = window.confirm("정말 삭제하시겠습니까?");
    if (confirm === true) {
      deleteComment(id);
    }
  };
.
.
.
<MdDelete
   size={20}
   className="hidden sm:flex"
   onClick={() => deleteCommentHandler(comment.id)}
          />

⬆︎ 로직이 담긴 hook을 import해오는 것 까지는 post,update와 동일하다. 하지만, 로직을 작성할 때, id가 인수로 들어가기 때문에, id를 인수로 넘겨줘야 한다.