next 화면 새로고침

일정관리를 만들고있는데 일정을 등록하거나 수정하면 바로 안바뀌고 f5새로고침을 해야만 바뀐다.

1. router.reload()

이 방법은 사용해보니 강제새로고침이라, 깜빡임이있어 사용자경험이 좋은거같진않다.

찾아보니 next에서 제공하는 화면새로고침하는 메서드가 있었다.
router.reload();

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.reload()}>
      새로고침
    </button>
  )
}

2. react-query의 refetch 사용

특정한값이 바뀌면 재렌더링 해주는데, 위에거와 다르게 깜빡임이 없어 사용자경험이 좋다.
특정한 값을 불러오는 useQuery에 refetch:원하는함수이름, useMutation에 onSuccess에 원하는함수이름 refetch를 실행시켜주면 끝!
댑악간단ㄷㄷ

// 요기에 refetch:원하는함수이름
const { data: schedules, refetch: schedulesRefetch } = useQuery(
    ['schedules'],
    getScheduleList,
  );

const updateScheduleMutation = useMutation(updateSchedule, {
    onSuccess: () => {
      successMessage('success', '일정이 수정되었습니다.');
      schedulesRefetch(); // 여기에서 실행!
    },
    onError: (error) => {
      successMessage('error', '일정을 수정할수없습니다.');
      console.error(error);
    },
  });

const onClickConfirm = () => {
    schedule
      ? updateScheduleMutation.mutate({ id: selectScheduleId, info: info })
      : createScheduleMutation.mutate(info);
  };