React 새로운 기능, 중요한 이유 및 마이그레이션 팁

다시 시작합니다. React ?의 새로운 기능에 대한 또 다른 게시물입니다. 하지만 솔직히 이것은 그만한 가치가 있습니다. React 19는 2024년 4월 출시된 Release Candidate(RC)에서 강력한 업데이트가 포함된 안정적인 릴리스로 공식적으로 이동했습니다! 성능 개선부터 새로운 후크 및 도구에 이르기까지 React 19는 소규모 앱을 구축하든 엔터프라이즈급 솔루션을 구축하든 모든 사람에게 무언가를 제공합니다.

프로젝트를 원활하게 업그레이드하는 데 도움이 되는 코드 예제와 마이그레이션 팁을 통해 새로운 기능을 살펴보겠습니다.

React 19의 새로운 기능

1. 성능 최적화

React 19에서는 다음을 소개합니다.

• 선택적 수분 공급 강화: 필요에 따라 UI의 일부만 수분 공급하여 서버 렌더링 앱의 수분 공급을 최적화합니다.
• 더 작은 번들 크기: React 19의 라이브러리는 더 가벼워서 로드 시간이 더 빨라지고 네트워크 사용량이 줄어듭니다.

예: 효율적인 수분 공급

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
hydrateRoot(container, <App />);

2. 새롭게 강화된 후크

아. useFormStatus: 단순화된 양식 상태 관리

새로운 useFormStatus 후크를 사용하면 양식을 더 쉽게 관리할 수 있습니다. 사용자 정의 컨텍스트나 소품 드릴링 없이도 양식의 보류 상태를 추적합니다.

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>Submit</button>;
}

ㄴ. useDeferredValue: 초기값 옵션

업데이트된 useDeferredValue 후크는 지연된 데이터를 처리하는 동안 초기 대체 값을 렌더링하여 보다 원활한 UI 전환을 보장합니다.

import { useDeferredValue } from 'react';

function Search({ deferredValue }) {
  const value = useDeferredValue(deferredValue, '');

  return <Results query={value} />;
}

ㄷ. useOptimistic: 낙관적 업데이트 처리

새로운 useOptimistic 후크를 사용하면 낙관적 UI 업데이트가 간단해집니다.

import { useOptimistic } from 'react';

function LikeButton() {
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(0);

  function handleLike() {
    setOptimisticLikes(prev => prev + 1);
    fetch('/api/like', { method: 'POST' });
  }

  return <button onClick={handleLike}>Likes: {optimisticLikes}</button>;
}

3. 문서 메타데이터 호이스팅

React 19는