Dev갱이 Dev갱이

useQuery는 useMuation처럼 팩토리 메서드 패턴으로 커스텀훅으로 만들 필요는 없어 보였다. 그래도 중복되는 쿼리키를 가지는 useQuery는 관심사를 분리하여 재사용 할 수 있게 커스텀훅으로 만드는게 좋아 보였다. feed-id를 통해서 특정 feed를 가져오는 useQuery 커스텀훅으로 만들기feed를 수정하기 위해 피드를 가져오는 부분 Notification에서 feedId를 통해 특정 피드를 가져오는 부분  useFeedByIdQuery.ts 커스텀 훅으로 만들었을때 장점feedDetail에서는 refetch가 필요하고 CreateFeed에서 remove가 필요할때 커스텀훅을 만들어 사용하면 원하는 옵션을 호출하여 사용할 수 있다.options를 호출하는 부분에서 사용하여 enable..

코드를 볼때부터 DRY를 지키지 않은 코드라는것을 바로 알 수 있다.심지어 해당 코드 중복 방식은 무려 56개의 컴포넌트에서 사용되고 있다....  커스텀훅으로 코드 리팩토링 하기목표Loading, Report Noti 관려 라이브러리들을 커스텀훅에서 import 하고 사용하기mutationFn과 mutationKey를 커스텀훅이 호출 하는곳에서 넘겨주기 OnMutate와onError는 거의 동일하게 사용되기 때문에 고정이고처리 완료되어 성공 했을때 Report.success 부분에 옵션들과 callback 함수를 통해서 성공 후의 작업들을 처리하게끔 작성 하였다.만약에 성공후의 data를 가공하거나 해야될 경우에는 코드를 수정 해야 될것 같다.  목표대로 Noti 관련 라이브러리들을 캡슐화 되었고 mu..

https://github.com/ssi02014/react-query-tutorial?tab=readme-ov-file

보통 이럴 경우에는 2가지 방법이 있는데 1. get을 한번 더 해서 리스트를 초기화한다. 2. useState를 활용, 기존 Array에 push 해서 setState를 해준다. const queryClient = useQueryClient(); const [userId, setUserId] = useState(5); // Query const { isLoading, data, isError } = useQuery('users', getUserWithAxios, { staleTime: 5000, }); const mutation = useMutation((data: User) => axios.post('http://localhost:8000/user', data), { onMutate: (data: U..