React 18 주요 변경점

1. Automatic Batching (자동 배치 처리):
   React 18은 이벤트 핸들러, 비동기 작업, DOM 이벤트 등 다양한 유형의 업데이트에 대해 자동으로 배치 처리를 수행합니다.
   이는 React 애플리케이션의 성능을 향상시키는 중요한 변경점으로, 여러 업데이트가 모여 한 번에 처리되도록 해 성능이 향상됩니다.

import { useState } from 'react';

function MyComponent() {
  const [value, setValue] = useState(0);
  const [otherValue, setOtherValue] = useState(0);

  const handleClick = () => {
    setValue(value + 1);
    setOtherValue(otherValue + 1);
    // 이 상태 업데이트들이 자동으로 묶여 처리됩니다.
  };

  return (
    <div>
      <span>Count: {value}</span>
      <span>Other count: {otherValue}</span>
      <button onClick={handleClick}>Increase</button>
    </div>
  );
}

2. React Server Components (리액트 서버 컴포넌트):
   이 기능은 서버 측에서 실행되는 컴포넌트를 도입하여 클라이언트 측 번들 크기를 줄이고, 데이터 가져오기와 같은 작업을 서버에서 직접 처리할 수 있도록 지원합니다.
   이로써 전체적인 성능이 개선되고, 사용자 경험이 향상될 수 있습니다.

3. Suspense and Concurrent Features (서스펜스와 동시성 기능): 이전 버전에서 실험적으로 도입되었던 Suspense와 Concurrent Mode는 React 18에서 더욱 발전하여, 데이터 로딩과 코드 분할을 더욱 쉽고 예측 가능하게 관리할 수 있게 됩니다.
   특히, 서스펜스는 컴포넌트가 준비될 때까지 로딩 상태를 표시할 수 있는 방법을 제공하고, 동시성 모드는 애플리케이션의 성능을 향상시키기 위해 여러 작업을 동시에 수행할 수 있게 합니다.

import { Suspense } from 'react';

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

4. Strict Mode Improvements (엄격 모드 개선): React 18은 개발 과정에서 애플리케이션의 잠재적 문제를 식별하기 위한 엄격 모드의 강화를 통해, 더 안정적이고 예측 가능한 코드 작성을 도와줍니다.

import React from 'react';

function App() {
  return (
    <React.StrictMode>
      <div>
        <MyComponent />
      </div>
    </React.StrictMode>
  );
}