새로운 React 19 Hooks (예시 포함)

Source: Dev.to

use()

use() 훅은 컴포넌트 내부에서 비동기 데이터를 간결하게 처리할 수 있는 방법을 제공합니다. Suspense와 함께 동작하여 프라미스가 해결될 때까지 렌더링을 일시 중지할 수 있습니다.

Use case

추가적인 async 처리를 하지 않고 데이터를 가져와 표시합니다.

Example: Fetching a user profile

import React, { use } from 'react';

async function fetchUserProfile(userId) {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}

function UserProfile({ userId }) {
  const user = use(fetchUserProfile(userId)); // Directly use the async function

  return (
    
      
## {user.name}
      
{user.bio}
    
  );
}

export default function App() {
  return (
    Loading...}>
      
    
  );
}

use()를 사용하면 async/await이나 .then() 호출 없이도 컴포넌트 안에서 데이터를 가져올 수 있습니다. 컴포넌트를 Suspense로 감싸면 데이터가 로드되는 동안 로딩 상태를 표시할 수 있습니다.

useOptimistic()

useOptimistic은 낙관적 UI 업데이트를 간소화합니다—서버가 백그라운드에서 변경을 처리하는 동안 UI를 즉시 업데이트합니다.

Use case

서버가 동작을 확인하기 전에 새로운 상태를 즉시 반영하는 “좋아요” 버튼.

Example: Optimistic “Like” button

import React, { useOptimistic } from 'react';
import { api } from './api'; // assume an API helper exists

function LikeButton({ postId }) {
  const [isLiked, setIsLiked] = useOptimistic(false);

  const handleLike = async () => {
    setIsLiked(true);               // Optimistic update
    await api.likePost(postId);     // Server call runs in the background
  };

  return (
    
      {isLiked ? 'Liked' : 'Like'}
    
  );
}

버튼이 즉시 업데이트되며, useOptimistic은 최종 서버 응답과 낙관적 상태를 동기화합니다.

useFormStatus()

useFormStatus는 폼의 제출 및 검증 상태에 대한 실시간 정보를 제공하여 로딩 표시기를 보여주거나 컨트롤을 비활성화하기 쉽게 합니다.

Use case

폼이 제출되는 동안 로딩 메시지를 표시하고 제출 버튼을 비활성화합니다.

Example: Form with loading indicator

import React, { useFormStatus } from 'react';

function MyForm() {
  const { isSubmitting, isValid } = useFormStatus();

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

isSubmitting과 isValid를 활용해 즉각적인 피드백을 제공하고 중복 제출을 방지할 수 있습니다.

useFormState()

useFormState는 폼 값 관리를 자동화하여 각 필드마다 수동으로 상태를 관리할 필요를 없애줍니다.

Use case

보일러플레이트 없이 연락처 폼의 여러 입력값을 관리합니다.

Example: Managing form values

import React, { useFormState } from 'react';

function ContactForm() {
  const { values, handleChange } = useFormState({
    name: '',
    email: '',
  });

  return (
    
      
        Name:
        
      
      
        Email:
        
      
      Submit
    
  );
}

useFormState는 values를 사용자 입력과 동기화하고, handleChange가 상태를 자동으로 업데이트합니다.

Conclusion

React 19의 새로운 훅—use, useOptimistic, useFormStatus, useFormState—은 일반적인 개발 패턴을 간소화합니다:

• use를 이용한 데이터 페칭은 Suspense와 매끄럽게 통합됩니다.
• useOptimistic을 사용하면 낙관적 UI 업데이트가 매우 간단해집니다.
• useFormStatus와 useFormState를 통해 폼 처리가 선언적이고 오류가 적은 방식으로 바뀝니다.

이러한 추가 기능은 보일러플레이트 코드를 줄이고 성능을 향상시키며, 개발자가 더 부드럽고 반응성이 뛰어난 사용자 경험을 구축하도록 돕습니다.