mutation 부분을 별도의 useHook으로 분리
"use client";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { deleteTodo, patchTodo, postTodo } from "./useQuery";
import { queryKey } from "../queryKey/queryKey";
export const useCreate = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: postTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: [queryKey.todos] });
},
});
};
export const useUpdate = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: patchTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: [queryKey.todos] });
},
});
};
export const useDelete = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: deleteTodo,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: [queryKey.todos] });
},
});
};
ChangeHandler 별도로 분리
"use client";
import { InputTodo } from "@/interface/types";
import { ChangeEvent, useState } from "react";
const useInput = (initialState: InputTodo) => {
const [inputValue, setInputValue] = useState(initialState);
const onInputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setInputValue((prev) => ({ ...prev, [name]: value }));
};
const onTextAreaChangeHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
const { name, value } = e.target;
setInputValue((prev) => ({ ...prev, [name]: value }));
};
const inputReset = () => {
setInputValue(initialState);
};
return { inputValue, onInputChangeHandler, onTextAreaChangeHandler, inputReset };
};
export default useInput;