React-Router 및 React-Hook-Form을 사용한 간편한 다중 페이지 양식

이 튜토리얼에서는 react-router 및 react-hook-form만 사용하여 양식 페이지, 확인/검토 페이지 및 완료 페이지로 구성된 다중 페이지 양식을 만드는 방법을 보여줍니다.

1. 먼저 페이지/구성 요소를 생성해 보겠습니다.

// Form

const Form = () => {
  return (
    <div>
      <form onSubmit={onSubmit}>
        <div>
          FirstName: <input type="text" />
        </div>
        <div>
          LastName: <input type="text" />
        </div>
        <div>
          Gender:
          <input type="radio" value="male" /> Male
          <input type="radio" value="female" /> Female
        </div>
        <div>
          Country:
          <select>
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
            <option value="India">India</option>
          </select>
        </div>
        <button type="submit">Confirm</button>
      </form>
    </div>
  );
};
export default Form;

// Confirm

const Confirm = () => {
  return (
    <div>
      <p>firstName: </p>
      <p>lastName: </p>
      <p>Gender: </p>
      <p>Country: </p>
      <button>back</button>
      <button>Submit</button>
    </div>
  );
};
export default Confirm;

// Complete

const Complete = () => {
  return (
    <div>
      <p>Registration successful!</p>
    </div>
  );
};
export default Complete;

2. 다음으로 react-hook-form useForm 을 사용하여 양식 구성 요소에서 양식 데이터를 가져옵니다.

const Form = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = handleSubmit((data) => {
    // logs form data
    console.log(data);
  });

  return (
    <div>
      <form onSubmit={onSubmit}>
        <div>
          FirstName: <input type="text" {...register("firstName")} />
        </div>
        <div>
          LastName: <input type="text" {...register("lastName")} />
        </div>
        <div>
          Gender:
          <input type="radio" value="male" {...register("gender")} /> Male
          <input type="radio" value="female" {...register("gender")} /> Female
        </div>
        <div>
          Country:
          <select {...register("country")}>
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
            <option value="India">India</option>
          </select>
        </div>
        <button type="submit">Confirm</button>
      </form>
    </div>
  );
};

제출 시 콘솔에 양식 데이터가 표시되어야 합니다.

// output would be something like this
{
 firstName: "John"
 lastName: "Doe"
 gender: "male"
 country: "Canada"
}

3. react-router의 useNavigate state prop을 사용하여 데이터를 확인 페이지로 전달합니다.

const Form = () => {
  const navigate = useNavigate();
  const { register, handleSubmit } = useForm();

  const onSubmit = handleSubmit((data) => {
    // Pass the form data on state prop when navigating to confirm page.
    navigate("/confirm", { state: data });
  });
 ...

4. 확인 페이지에 데이터 표시 -- 이번에는 react-router의 사용 useLocation .

const Confirm = () => {
  // Get current location's state
  const { state } = useLocation();

  // Display the data using `state.{input name}`
  // In this case, input name will be the value we set on input register from the Form component
  return (
    <div>
      <p>firstName: {state.firstName}</p>
      <p>lastName: {state.lastName}</p>
      <p>Gender: {state.gender}</p>
      <p>Country: {state.country}</p>
      <Link to="/" state={state}>
        <button>back</button>
      </Link>
      <Link to="/complete">
        <button>Submit</button>
      </Link>
    </div>
  );
};

이 줄에서 양식 데이터를 다시 전달했습니다.

...
      <Link to="/" state={state}>
        <button>back</button>
      </Link>
...

사용자가 back 버튼을 클릭하면 현재 입력 데이터를 "기억"할 수 있고 이를 양식에 표시할 수 있기 때문입니다.

이를 위해 locations state prop에서 양식 데이터 값을 다시 가져오고 ww는 useForm의 reset을 사용하여 defaultValues로 표시합니다.

const Form = () => {
  const navigate = useNavigate();
  const { state } = useLocation();
  const { register, reset, handleSubmit } = useForm();

  const onSubmit = handleSubmit((data) => {
    navigate("/confirm", { state: data });
  });

  useEffect(() => {
    // reset the entire form and set the defaultValues with state value
    reset(state);
  }, []);
...

끝났어!

여기에서 전체 소스를 찾을 수 있습니다link.