라이브러리 - React Router v7 - useFetcher

React Router v7

 

 

✅ useFetcher

---

원래는 Remix에서 처음 등장한 기능이고, 그 이후 React Router의 Data Router(6.4+)에 들어옴.

페이지 이동 없이 loader/action만 호출하고 싶다. 라는 목적을 위해 만들어짐

 

1. 기존 Form처럼 사용하는 방법(버튼을 눌러 submit 하는 방식)

const fetcher = useFetcher();

<fetcher.Form
  method="POST"
  action={`/community/${loaderData.post.post_id}/upvote`}
>
  <input
    type="hidden"
    value={loaderData.post.post_id}
    name="postId"
  />
  <Button
    variant="outline"
    className={cn(
      "flex h-14 flex-col",
      loaderData.post.is_upvoted
        ? "border-primary text-primary"
        : "",
    )}
  >
    <ChevronUpIcon className="size-4 shrink-0" />
    <span>{loaderData.post.upvotes}</span>
  </Button>
</fetcher.Form>

 

 

2. 어떠한 event에도 submit 하게 만드는 방식

  const fetcher = useFetcher();
  const absorbClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    fetcher.submit(
      {
        postId: id,
      },
      { method: "POST", action: `/community/${id}/upvote` },
    );
  };