React 19 주요 기능 가볍게 살펴보기

 

안녕하세요!

 

React 19가 공식적으로 출시되었고 안정화되었습니다.

 

이번 글에서는 React 19의 주요 기능과 개선 사항을 소개하겠습니다.

 

이 내용은 깊이 있는 분석보다는 친절한 개요에 가깝습니다.

 

따라서 새로운 기능과 개선 사항에 대한 감을 잡을 수 있을 것입니다.

 

먼저, React 19의 주요 추가 기능 중 하나는 '액션'이라는 개념입니다.

 

액션은 데이터 변화를 처리하기 위해 전달할 수 있는 함수입니다.

 

예를 들어, 사용자의 이름을 API 호출로 업데이트하는 경우, 액션을 사용하여 로딩 상태, 에러, 그리고 낙관적인 업데이트를 수동으로 관리하지 않고 처리할 수 있습니다.

 

이전 버전에서는 여러 상태 호출을 처리해야 했지만, 액션을 사용하면 비동기 전환을 자동으로 처리할 수 있습니다.

 

또한, 액션을 사용하면 폼 처리가 더 쉬워집니다. 폼 요소의 액션 속성에 함수를 직접 전달할 수 있으며, 폼이 제출되면 자동으로 로딩 상태를 처리하고 성공 시 폼을 리셋합니다.

import { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setLoading(true);
    try {
      // API 호출
      await fetch('/api/update-name', {
        method: 'POST',
        body: JSON.stringify({ name }),
        headers: { 'Content-Type': 'application/json' },
      });
      setLoading(false);
    } catch (error) {
      console.error(error);
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
      <button type="submit">제출</button>
      {loading ? <p>로딩 중...</p> : null}
    </form>
  );
}

 

또한, React 19에서는 'useActionState'와 'useFormStatus'라는 새로운 훅을 도입했습니다.

 

이 훅을 사용하면 폼 처리와 데이터 변화를 더 깔끔하게 처리할 수 있습니다.

import { useActionState, useFormStatus } from 'react';

function MyForm() {
  const { actionState, setActionState } = useActionState();
  const { formStatus, setFormStatus } = useFormStatus();

  const handleSubmit = async (event) => {
    event.preventDefault();
    setActionState('pending');
    try {
      // API 호출
      await fetch('/api/update-name', {
        method: 'POST',
        body: JSON.stringify({ name }),
        headers: { 'Content-Type': 'application/json' },
      });
      setActionState('success');
      setFormStatus('success');
    } catch (error) {
      console.error(error);
      setActionState('error');
      setFormStatus('error');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
      <button type="submit">제출</button>
      {actionState === 'pending' ? <p>로딩 중...</p> : null}
      {formStatus === 'success' ? <p>성공!</p> : null}
      {formStatus === 'error' ? <p>에러!</p> : null}
    </form>
  );
}

 

React 19에서는 'useOptimistic'이라는 새로운 훅도 도입했습니다.

 

이 훅을 사용하면 서버가 응답하기 전에 변경 사항을 표시할 수 있습니다.

 

예를 들어, 사용자가 이름을 업데이트하면 즉시 새로운 이름을 표시하고 서버 응답을 기다릴 수 있습니다.

 

import { useOptimistic } from 'react';

function MyForm() {
  const { optimistic, setOptimistic } = useOptimistic();

  const handleSubmit = async (event) => {
    event.preventDefault();
    setOptimistic(true);
    try {
      // API 호출
      await fetch('/api/update-name', {
        method: 'POST',
        body: JSON.stringify({ name }),
        headers: { 'Content-Type': 'application/json' },
      });
      setOptimistic(false);
    } catch (error) {
      console.error(error);
      setOptimistic(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
      <button type="submit">제출</button>
      {optimistic ? <p>업데이트 중...</p> : null}
    </form>
  );
}

 

React 19에서는 'use'라는 새로운 API도 도입했습니다.

 

이 API를 사용하면 렌더 함수에서 프로미스를 해제할 수 있습니다.

 

예를 들어, API 호출을 통해 데이터를 가져올 수 있습니다.

import { use } from 'react';

function MyComponent() {
  const data = use(fetch('/api/data'));

  return (
    <div>
      {data ? <p>데이터: {data}</p> : <p>로딩 중...</p>}
    </div>
  );
}

 

React 19에서는 서버 컴포넌트도 개선되었습니다.

 

서버 컴포넌트를 사용하면 서버에서 컴포넌트를 렌더링하고 클라이언트에서 하이드레이션할 수 있습니다.

 

이 기능은 정적 사이트 생성을 더 유연하고 강력하게 만듭니다.

import { renderToString } from 'react-dom/server';

function MyComponent() {
  return (
    <div>
      <p>서버에서 렌더링된 컴포넌트</p>
    </div>
  );
}

const html = renderToString(<MyComponent />);

 

React 19에서는 서버 액션도 개선되었습니다.

 

서버 액션을 사용하면 클라이언트에서 서버 함수를 호출할 수 있습니다.

 

이 기능은 서버 측 로직을 처리하는 데 유용합니다.

import { useServer } from 'react';

function MyComponent() {
  const { server } = useServer();

  const handleClick = async () => {
    const data = await server.fetch('/api/data');
    console.log(data);
  };

  return (
    <div>
      <button onClick={handleClick}>서버 함수 호출</button>
    </div>
  );
}

 

React 19에서는 많은 작은 개선 사항도 포함되어 있습니다.

 

예를 들어, 함수 컴포넌트에서 ref를 prop으로 접근할 수 있습니다.

import { useRef } from 'react';

function MyComponent() {
  const ref = useRef(null);

  return (
    <div ref={ref}>
      <p>ref를 prop으로 접근할 수 있습니다.</p>
    </div>
  );
}

 

또한, React 19에서는 하이드레이션 에러를 더 쉽게 디버깅할 수 있습니다.

 

React는 더 자세한 에러 메시지를 제공하여 SSR 불일치를 더 쉽게 해결할 수 있습니다.

import { hydrate } from 'react-dom';

function MyComponent() {
  return (
    <div>
      <p>하이드레이션 에러를 더 쉽게 디버깅할 수 있습니다.</p>
    </div>
  );
}

hydrate(<MyComponent />, document.getElementById('root'));

 

마지막으로, React 19에서는 메타데이터, 스타일, 스크립트를 더 쉽게 관리할 수 있습니다.

 

예를 들어, 페이지 제목, 저자, 스타일시트를 정의할 수 있습니다.

import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <title>페이지 제목</title>
        <meta name="author" content="저자" />
        <link rel="stylesheet" href="스타일시트" />
      </Helmet>
      <p>메타데이터, 스타일, 스크립트를 더 쉽게 관리할 수 있습니다.</p>
    </div>
  );
}

 

그럼.