[React] React Router의 Form vs useFetcher().Form

 

fetcher.Form은 페이지 전환 없이 백그운드에서 데이터를 변경하거나 제출해야 할 때 사용합니다.

 

1. 일반 Form

페이지 전환이 발생
전체 페이지가 다시 로드됨
주로 주요 CRUD 작업에 사용 (예: 새 이벤트 생성, 이벤트 수정)

2. useFetcher() .Form

페이지 전환 없음
백그라운드에서 데이터 처리
주로 작은 업데이트나 부분적인 데이터 변경에 사용 (예: 좋아요 버튼, 구독 신청, 댓글 작성, 상태 토글 (예: 완료/미완료) )

 

 

예시 ) 

import { useFetcher } from 'react-router-dom';

function NewsletterSignup() {
  const fetcher = useFetcher();
  
  return (
    <fetcher.Form method="post" action="/newsletter">
      <input type="email" name="email" />
      <button>구독하기</button>
    </fetcher.Form>
  );
}