React 19의 흥미로운 새로운 추가 사항 살펴보기

소개

React 19에는 성능, 개발자 경험 및 애플리케이션 효율성을 향상시키기 위해 설계된 몇 가지 새로운 기능과 개선 사항이 도입되었습니다. 이 블로그에서는 실제 사례를 통해 React 19의 주요 기능 중 일부를 살펴보고 이러한 기능이 개발에 미치는 영향에 대해 결론을 내릴 것입니다.

• 리액트 컴파일러

React 컴파일러는 React 코드를 일반 JavaScript로 변환하여 시작 성능을 크게 향상하고 로드 시간을 개선합니다. 이러한 주요 변화는 React가 내부적으로 구성 요소를 처리하는 방식에 영향을 미쳐 더 빠르고 효율적인 애플리케이션을 제공합니다.

예:

// Before compilation
const MyComponent = () => <div>Hello, World!</div>;

// After compilation (simplified)
function MyComponent() {
  return React.createElement('div', null, 'Hello, World!');
}

• 자동배칭

React 19에는 상태 업데이트 자동 일괄 처리가 도입되었습니다. 짧은 시간 내에 여러 상태 변경이 발생하면 React는 이를 일괄 처리하여 UI 응답성이 향상되고 사용자 경험이 더욱 원활해집니다.

예:

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  function handleClick() {
    // Updates are batched together
    setCount(count + 1);
    setText('Count updated');
  }

  return (
    <div>
      <p>{count}</p>
      <p>{text}</p>
      <button onclick="{handleClick}">Update</button>
    </div>
  );
}

• 서버 구성요소

서버 구성 요소는 완성된 페이지를 사용자에게 보내기 전에 서버에서 구성 요소를 렌더링합니다. 이러한 접근 방식을 사용하면 로드 시간이 빨라지고 SEO가 향상되며 데이터 처리가 원활해집니다.

예:

// ServerComponent.js
export default function ServerComponent() {
  return <div>Rendered on the server</div>;
}

// App.js
import ServerComponent from './ServerComponent';

function App() {
  return (
    <div>
      <servercomponent></servercomponent>
      <p>Client-side content</p>
    </div>
  );
}

• 액션 API

Actions API는 구성 요소 내에서 비동기 논리를 처리하는 새로운 내장 방법을 제공하여 비동기 작업 관리를 단순화하고 코드 가독성을 향상시킵니다.

예:

import { useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }

  return (
    <div>
      <button onclick="{fetchData}">Fetch Data</button>
      {data && <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

}

); }

• 문서 메타데이터

React 19를 사용하면 제목, 메타 태그와 같은 문서 메타데이터를 구성 요소 내에서 직접 관리할 수 있습니다. 이러한 개선으로 인해 반응 헬멧과 같은 외부 패키지가 필요하지 않습니다.

예:

import { DocumentHead } from 'react';

function MyPage() {
  return (
    <div>
      <documenthead>
        <title>My Page Title</title>
        <meta name="description" content="This is my page description">
      </documenthead>
      <h1>Welcome to My Page</h1>
    </div>
  );
}

• 자산 로딩

React 19는 사용자가 현재 페이지와 상호작용하는 동안 이미지 및 기타 파일이 백그라운드에서 로드되도록 허용하여 자산 로딩을 개선하고 로드 시간을 줄이고 전반적인 성능을 향상시킵니다.

예:

function MyComponent() {
  return (
    <div>
      <img src="large-image.jpg" alt="React 19의 흥미로운 새로운 추가 사항 살펴보기" loading="lazy">
      <p>Content loads immediately, image loads in the background.</p>
    </div>
  );
}

• 향상된 후크

React 19는 새로운 후크를 도입하고 기존 후크를 개선합니다. use() 후크를 사용하면 개발자가 비동기 기능을 처리하고 상태를 보다 효과적으로 관리할 수 있습니다.

예:

import { use } from 'react';

function MyComponent() {
  const data = use(async () => {
    const response = await fetch('https://api.example.com/data');
    return response.json();
  });

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}