React 19는 우리가 응용 프로그램에서 양식을 처리하고 낙관적 업데이트를 관리하는 방법을 혁신하는 몇 가지 강력한 새로운 후크를 소개합니다. 이 블로그에서는 useformStatus, useActionState 및 useOptipication -REACT 애플리케이션을보다 반응적이고 사용자 친화적으로 만드는 3 개의 후크를 탐색합니다.

USEFORMSTATUS : 향상된 양식 처리

UseformStatus hook는 양식 제출에 대한 실시간 정보를 제공하므로 반응적이고 액세스 가능한 양식을보다 쉽게 ​​만들 수 있습니다. REACT 18의 양식 처리 기능 에서이 후크가 어떻게 향상되는지 살펴 보겠습니다.

예 1 : 기본 형태 로딩 상태

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    

React 18에서 usestate를 사용하여 로딩 상태를 수동으로 관리해야합니다. 새로운 useformStatus 후크가 자동으로 처리하여 보일러 플레이트 코드를 줄입니다.

예 2 : 여러 형태 상태

function FormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    

      {pending && Submitting via {method}...}
      {!pending && data && Last submission: {new Date().toLocaleString()}}
    
  );
}

function ContactForm() {
  return (
    

예 3 : 양식 검증 상태

function ValidationStatus() {
  const { pending, validationErrors } = useFormStatus();

  return (
    

      {validationErrors?.map((error, index) => (
        
{error}
      ))}
    
  );
}

function RegistrationForm() {
  return (
    

예 4 : 다단계 양식 진행

function FormProgress() {
  const { pending, step, totalSteps } = useFormStatus();

  return (
    

      





  
  
  Example 5: File Upload Progress




function UploadProgress() {
  const { pending, progress } = useFormStatus();

  return (
    

      {pending && progress && (
        

          





  
  
  useActionState: Managing Action Results


The useActionState hook provides a way to track the state of form actions and server mutations, making it easier to handle success and error states.


  
  
  Example 1: Basic Action State




function SubmissionStatus() {
  const state = useActionState();

  return (
    

      {state.status === 'success' && 
Submission successful!
}
      {state.status === 'error' && 
Error: {state.error.message}
}
    
  );
}

function CommentForm() {
  return (
    
 {
      await submitComment(formData);
    }}>
      
      
      
    
  );
}





  
  
  예 2 : 행동 기록




function ActionHistory() {
  const state = useActionState();

  return (
    

      
Recent Actions
      

        {state.history.map((action, index) => (
          

            {action.type} - {action.timestamp}
            {action.status === 'error' && ` (Failed: ${action.error.message})`}
          
        ))}
      
    
  );
}





  
  
  예 3 : 재 시도 메커니즘




function RetryableAction() {
  const state = useActionState();

  return (
    

      {state.status === 'error' && (
         state.retry()}
          disabled={state.retrying}
        >
          {state.retrying ? 'Retrying...' : 'Retry'}
        
      )}
    
  );
}





  
  
  예제 4 : 액션 큐




function ActionQueue() {
  const state = useActionState();

  return (
    

      
Pending Actions
      {state.queue.map((action, index) => (
        

          {action.type} - Queued at {action.queuedAt}
           action.cancel()}>Cancel
        
      ))}
    
  );
}





  
  
  예 5 : 조치 통계




function ActionStats() {
  const state = useActionState();

  return (
    

      
Action Statistics
      
Success Rate: {state.stats.successRate}%
      
Average Duration: {state.stats.avgDuration}ms
      
Total Actions: {state.stats.total}
    
  );
}





  
  
  사용 중심 : Smooth UI 업데이트


 useoptipication 후크는 서버 응답을 기다리는 동안 즉각적인 UI 업데이트를 가능하게하여보다 반응이 좋은 사용자 경험을 만듭니다. 


  
  
  예 1 : 낙관적 인 할 일 목록




function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  async function addTodo(formData) {
    const newTodo = {
      id: Date.now(),
      text: formData.get('todo'),
      completed: false
    };

    addOptimisticTodo(newTodo);
    await saveTodo(newTodo);
  }

  return (
    

      

        
        Add Todo
      
      

        {optimisticTodos.map(todo => (
          
{todo.text}
        ))}
      
    
  );
}





  
  
  예제 2 : 낙관적 인 버튼




function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state) => state   1
  );

  async function handleLike() {
    addOptimisticLike();
    await likePost(postId);
  }

  return (
    
      {optimisticLikes} Likes
    
  );
}





  
  
  예제 3 : 낙관적 주석 스레드




function CommentThread({ postId }) {
  const [comments, setComments] = useState([]);
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );

  async function submitComment(formData) {
    const comment = {
      id: Date.now(),
      text: formData.get('comment'),
      pending: true
    };

    addOptimisticComment(comment);
    await saveComment(postId, comment);
  }

  return (
    

      

        
        Comment
      
      {optimisticComments.map(comment => (
        





  
  
  Example 4: Optimistic Shopping Cart




function ShoppingCart() {
  const [cart, setCart] = useState([]);
  const [optimisticCart, updateOptimisticCart] = useOptimistic(
    cart,
    (state, update) => {
      const { type, item } = update;
      switch (type) {
        case 'add':
          return [...state, item];
        case 'remove':
          return state.filter(i => i.id !== item.id);
        case 'update':
          return state.map(i => i.id === item.id ? item : i);
        default:
          return state;
      }
    }
  );

  async function updateCart(type, item) {
    updateOptimisticCart({ type, item });
    await saveCart({ type, item });
  }

  return (
    

      {optimisticCart.map(item => (
        

          {item.name} - ${item.price}
           updateCart('remove', item)}>Remove
        
      ))}
    
  );
}





  
  
  예 5 : 낙관적 인 사용자 설정




function UserSettings() {
  const [settings, setSettings] = useState({});
  const [optimisticSettings, updateOptimisticSetting] = useOptimistic(
    settings,
    (state, update) => ({
      ...state,
      [update.key]: update.value
    })
  );

  async function updateSetting(key, value) {
    updateOptimisticSetting({ key, value });
    await saveSettings({ [key]: value });
  }

  return (
    

      

        
          Theme:
           updateSetting('theme', e.target.value)}
          >
            Light
            Dark
          
        
      
      

        
          Notifications:
           updateSetting('notifications', e.target.checked)}
          />
        
      
    
  );
}




 응용 프로그램에서 이러한 후크를 사용할 때 가장 최신 정보 및 모범 사례에 대한 공식 반응 문서를 확인하십시오. 

 행복한 코딩!