React의 useActionState: 효율적인 양식 관리를 위한 최고의 도구-JS 튜토리얼-php.cn

React의 useActionState: 효율적인 양식 관리를 위한 최고의 도구

PHPz

풀어 주다： 2024-07-19 16:03:00

원래의

809명이 탐색했습니다.

Image description 개발 경험을 향상시킬 수 있는 흥미롭고 새로운 기능을 제공하는 React 19가 곧 출시됩니다. 눈에 띄는 추가 기능 중 하나는 useActionState 후크입니다. 이는 React 애플리케이션에서 양식을 관리하는 방법에 혁명을 일으켰습니다. 이 블로그 게시물에서는 이 새로운 후크를 활용하여 더욱 깔끔하고 효율적인 코드를 작성하는 방법을 살펴보겠습니다.

React 19 설정

React 19를 시작하려면 새 프로젝트를 설정하고 React 19 베타 버전을 설치해야 합니다.
npm vite@latest 생성
npm 설치 반응@베타 반응-dom@베타

그러면 최신 버전의 React로 프로젝트가 설정됩니다.

React의 전통적인 양식 관리

React의 양식 관리에는 전통적으로 각 입력 필드에 대해 별도의 상태를 생성하고, 로드 및 오류 상태를 처리하고, 양식 데이터를 관리하기 위한 광범위한 코드를 작성하는 작업이 포함됩니다. 전형적인 예는 다음과 같습니다.

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const handleSubmit = async (event) => {
  event.preventDefault();
  setLoading(true);
  setError(null);
  try {
    // Simulate API call
    const response = await fakeApiCall(username, password);
    console.log(response);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

로그인 후 복사

양식이 복잡해지면 이 접근 방식이 번거로울 수 있습니다.

useActionState 소개

useActionState 후크는 여러 상태 변수의 필요성을 없애고 상용구 코드를 줄여 양식 관리를 단순화합니다. 사용 방법은 다음과 같습니다.

단계적 구현

기존 상태 제거: 각 입력 필드에 대해 별도의 상태를 제거합니다.
useActionState 설치: 프로젝트가 React 19로 설정되어 있는지 확인하세요.
리팩터링 양식 처리: useActionState를 사용하여 양식 데이터 및 상태 업데이트를 관리합니다.

예

import { useActionState } from 'react';

const LoginForm = () => {
  const [state, submitAction, isPending] = useActionState(async (formData) => {
    const response = await fakeApiCall(formData.get('username'), formData.get('password'));
    return { data: response.data, error: null };
  }, { data: null, error: null });

  return (
    <form onSubmit={submitAction}>
      <input name="username" placeholder="Username" required />
      <input name="password" type="password" placeholder="Password" required />
      <button type="submit" disabled={isPending}>Login</button>
      {state.error && <p>{state.error}</p>}
      {state.data && <p>Welcome, {state.data.username}!</p>}
    </form>
  );
};

로그인 후 복사

이 예에서 useActionState는 양식 데이터, 제출 상태 및 오류 관리를 처리하여 코드를 크게 단순화합니다.