[React] React Router의 useFetcher 훅 - 주요 속성

 

useFetcher는 페이지 전환 없이 서버와 데이터를 주고받을 수 있게 해주는 React Router의 훅입니다.

useNavigate 훅과 세트로 기억하시면 좋습니다

 

 

1. fetcher.Form

https://daunje0.tistory.com/201

[React] React Router의 Form vs fetcher.Form

 

 

2. fetcher.submit

// 프로그래밍 방식으로 데이터 제출
fetcher.submit(
  { email: 'test@test.com' },
  { method: 'post', action: '/newsletter' }
);

 

3. fetcher.load

// GET 요청으로 데이터 로드
fetcher.load('/api/data');

 

 

이하 속성들은 useNavigation 훅과 흡사합니다.

https://daunje0.tistory.com/200

[React] React Router의 useNavigation 훅 - state와 주요 속성

 

 

useNavigation 과 useFetch 의 차이

1. 페이지 전환
useNavigation: 페이지 전환 발생
useFetcher: 페이지 전환 없음

2. 동시 요청
useNavigation: 한 번에 하나의 네비게이션
useFetcher: 여러 개의 동시 요청 가능

3. 사용 목적
useNavigation: 전체 페이지 네비게이션
useFetcher: 백그라운드 데이터 조작

 

4. fetcher.state

• idle: 대기 상태
• loading: 데이터 로드 중
• submitting: 데이터 제출 중

5. fetcher.data: 서버로부터 받은 응답 데이터

6. fetcher.formData: 제출된 폼 데이터

7. fetcher.formAction: 현재 제출 중인 action URL

8. fetcher.formMethod: 현재 사용 중인 HTTP 메서드