[React.js] useFetcher 훅 (React Router)

useFetcher 훅 (React Router)

들어가묘

• 리액트 라우터(React Router)에서 제공하는 @useFetcher()@ 훅에 대해 정리해본다.

 

useFetcher

개념

• 리액트 라우터(React Router)에서 페이지 전환 없이 데이터 로딩이나 액션을 처리할 수 있게 도와주는 훅(Hook)
• 주로 폼 제출이나 데이터 페칭을 백그라운드에서 처리하고, 사용자에게 시각적 전환 없이 결과를 보여줘야 하는 경우에 사용하면 유용하다.

 

주요 기능

1. 데이터 로딩 및 액션 트리거
   • 로딩 상태를 관리하고, 데이터를 비동기적으로 가져오거나 서버에 데이터를 제출할 수 있다.
2. 페이지 전환 없음.
   • 페이지 전환 없이 데이터를 가져오거나 제출할 수 있으므로, 사용자 경험이 보다 매끄럽다.
3. 상태 관리
   • 현재 로딩 상태와 로딩 완료 후 데이터를 관리할 수 있다.

 

사용 방법

• @useFetcher@는 React Router의 @react-router-dom@ 패키지에서 제공된다.

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

function NewsletterSignup() {
  const fetcher = useFetcher();

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    fetcher.submit(formData, { method: 'post', action: '/newsletter' });
  };

  return (
    <fetcher.Form method="post" action="/newsletter" onSubmit={handleSubmit}>
      <input type="email" name="email" required />
      <button type="submit">Sign Up</button>
    </fetcher.Form>
  );
}

 

주요 속성 및 메서드	설명
@fetcher.Form@	- 기존의 HTML form 태그와 유사하게 사용되지만, 이 방법으로 데이터를 제출하면 페이지 전환 없이 지정된 액션을 트리거한다.
@fetcher.submit@	- 폼을 사용하지 않고도 프로그래매틱하게 데이터를 제출할 수 있는 함수 - 데이터와 메서드, 액션을 지정하여 호출한다.
@fetcher.data@	- 로딩이 완료된 후 서버로부터 반환된 데이터를 포함한다.
@fetcher.state@	- 현재 로딩 상태 - @idle@, @loading@, @submitting@ 중 하나의 값을 가진다.

 

사용 예제

예제

• @useFetcher@를 사용하여 폼 제출 시 데이터를 서버로 보내고, 서버 응답을 받아 처리하는 예제

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

import classes from './NewsletterSignup.module.css';
import { useEffect } from 'react';

function NewsletterSignup() {
  const fetcher = useFetcher();
  const { data, state } = fetcher;

  useEffect(() => {
    if (state === 'idle' && data && data.message) {
      window.alert(data.message);
    }
  }, [data, state]);

  return (
    <fetcher.Form
      method="post"
      action="/newsletter"
      className={classes.newsletter}
    >
      <input
        type="email"
        placeholder="Sign up for newsletter..."
        aria-label="Sign up for newsletter"
      />
      <button>Sign up</button>
    </fetcher.Form>
  );
}

export default NewsletterSignup;

 

정리

• @useFetcher@를 이용하여 페이지 전환 없이 데이터를 가져오거나 제공할 수 있다.

 

참고 사이트

useFetcher v6.24.1 | React Router