React 18

React 18

React 19 beta가 24년 04월에 출시되어 복습 할겸 18에 대해 글을 작성합니다.

1. 자동 배치 (Automatic Batching)

React 18에서 가장 큰 변화 중 하나는 자동 배치입니다. 자동 배치는 여러 상태 업데이트를 하나의 렌더링으로 병합하여 애플리케이션의 성능을 향상시키는 기능입니다. 이전 버전에서는 이벤트 핸들러 내에서만 배치가 일어났지만, React 18에서는 비동기 코드 내에서도 자동으로 배치가 이루어집니다.

import { useState } from 'react';

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

  const handleClick = async () => {
    await fetch('/api/data');
    setCount(c => c + 1);
    setText('Updated!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>{count}</p>
      <p>{text}</p>
    </div>
  );
}

위 코드에서 handleClick 함수는 비동기 함수이지만, 상태 업데이트는 자동으로 배치되어 하나의 렌더링으로 처리됩니다. 해당 기능으로 프로그램 성능 최적화에 큰 도움이 됩니다.

2. startTransition API

React 18은 사용자 인터페이스가 보다 부드럽고 반응성 있게 동작하도록 돕기 위해 새로운 startTransition API를 도입했습니다. 이 API는 상태 업데이트를 ‘전환’으로 표시하여, React가 중요한 업데이트를 우선 처리하고 덜 중요한 업데이트를 나중에 처리할 수 있게 합니다.

import { useState, startTransition } from 'react';

function MyComponent() {
  const [isPending, setIsPending] = useState(false);
  const [list, setList] = useState([]);

  const handleClick = () => {
    setIsPending(true);
    startTransition(() => {
      const newList = generateBigList(); // 큰 리스트를 생성하는 함수
      setList(newList);
      setIsPending(false);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Generate List</button>
      {isPending ? <p>Loading...</p> : <List items={list} />}
    </div>
  );
}

위 코드에서 startTransition은 큰 리스트를 생성하는 작업을 전환으로 처리하여, 사용자는 버튼 클릭 시 지연 없이 즉각적인 피드백을 받을 수 있습니다.

3. Concurrent Features (동시성 기능)

React 18은 동시성 모드를 기본으로 도입하여, 더 나은 성능과 사용자 경험을 제공합니다. 동시성 모드는 React가 여러 상태 업데이트를 효율적으로 처리할 수 있게 하며, 애플리케이션이 보다 부드럽게 작동하도록 돕습니다. 동시성 모드를 사용하려면, createRoot를 사용하여 애플리케이션을 초기화해야 합니다.

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

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

동시성 모드의 작동 방식 동시성 모드는 이러한 문제를 해결하기 위해 여러 상태 업데이트를 효율적으로 관리합니다. 주요 개념은 다음과 같습니다:

작업 분할: 긴 작업을 여러 작은 작업으로 분할하여, React가 중요한 작업을 우선적으로 처리할 수 있게 합니다. 작업 중단 및 재개: React는 작업을 중단하고 중요한 작업을 먼저 처리한 후, 다시 중단된 작업을 이어서 할 수 있습니다. 전환 처리: React는 상태 업데이트를 전환으로 처리하여, 중요한 업데이트와 덜 중요한 업데이트를 구분할 수 있습니다.

이 코드를 통해 동시성 모드를 활성화하면, React는 더 나은 렌더링 성능을 제공하고, 사용자 인터페이스의 응답성을 향상시킬 수 있습니다.

4. 서버 컴포넌트 (Server Components)

React 18에서는 서버 컴포넌트를 도입하여, 서버에서 직접 렌더링할 수 있는 컴포넌트를 만들 수 있습니다. 이는 초기 로딩 시간을 단축하고, 클라이언트 측에서 불필요한 JavaScript 로드를 줄이는 데 도움이 됩니다. 서버 컴포넌트는 아직 실험 단계에 있지만, 앞으로 React의 중요한 기능으로 자리 잡을 것으로 기대됩니다.

// MyServerComponent.server.js
import React from 'react';

export default function MyServerComponent() {
  const data = fetchDataFromServer(); // 서버에서 데이터를 가져오는 함수
  return <div>{data}</div>;
}

서버 컴포넌트는 서버에서 렌더링되기 때문에 초기 로딩 시간을 크게 단축할 수 있습니다. 클라이언트 측에서 필요한 JavaScript 양을 줄이고, 브라우저가 초기 로드 시 더 적은 양의 데이터를 다운로드하여 빠르게 페이지를 렌더링할 수 있습니다.

5. 서스펜스 (Suspense)

React 18은 서스펜스를 통해 데이터 로딩 시 보다 효율적인 처리를 가능하게 합니다. 서스펜스는 컴포넌트가 비동기 작업을 완료할 때까지 로딩 상태를 표시할 수 있도록 도와줍니다. 이를 통해 사용자 경험을 향상시키고, 비동기 작업 완료 후 컴포넌트를 렌더링할 수 있습니다.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

위 코드에서 React.lazy와 Suspense를 사용하여, MyComponent가 로드될 때까지 로딩 메시지를 표시합니다. 이는 사용자에게 비동기 데이터 로딩 중임을 명확히 알려줄 수 있어, 더 나은 사용자 경험을 제공합니다.

결론

React 18은 개발자들이 보다 성능 좋은 애플리케이션을 만들 수 있도록 돕는 다양한 새로운 기능들을 도입했습니다. 자동 배치, startTransition API, 동시성 기능, 서버 컴포넌트, 그리고 서스펜스는 모두 개발자 경험을 향상시키고, 애플리케이션의 성능을 극대화하는 데 큰 도움이 됩니다.