[리액트] React18 주요 개선점

웹개발/reactjs

[리액트] React18 주요 개선점

joamashi 2025. 3. 17. 20:08

React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리로, 최신 버전인 React 18에서는 개발자 경험과 애플리케이션 성능을 향상시키기 위한 여러 기능이 도입되었습니다.

자동 배칭(Auto Batching): 이제 여러 상태 업데이트가 자동으로 배칭되어, 불필요한 리렌더링을 줄이고 성능을 향상시킵니다. 예를 들어, 이전에는 각각의 setState 호출이 별도의 렌더링을 유발했지만, React 18에서는 이러한 호출이 자동으로 배칭되어 한 번의 렌더링만 발생합니다. citeturn0search5
동시성 기능(Concurrent Features): React 18은 동시성 기능을 도입하여, 렌더링 작업을 여러 작은 단위로 나누어 우선순위에 따라 처리합니다. 이를 통해 사용자 인터페이스의 응답성이 향상되고, 복잡한 UI에서도 부드러운 사용자 경험을 제공합니다. citeturn0search5
startTransition 및 useTransition Hook: 이러한 새로운 Hook을 사용하면 상태 업데이트를 전환 업데이트로 지정하여, 긴급하지 않은 업데이트의 우선순위를 낮출 수 있습니다. 이를 통해 사용자 인터페이스의 중요한 상호작용이 지연 없이 처리되도록 합니다. citeturn0search5
useDeferredValue Hook: 이 Hook은 값의 업데이트를 지연시켜, 렌더링 우선순위가 낮은 상태값의 업데이트를 지연시킴으로써 사용자 인터페이스를 반응적으로 유지하는 데 도움을 줍니다. citeturn0search5
Suspense를 통한 서버 사이드 렌더링(SSR) 지원: React 18에서는 Suspense 컴포넌트를 활용한 새로운 SSR 아키텍처를 도입하여, 서버에서 부분적으로 HTML을 스트리밍하고 클라이언트에서 선택적으로 하이드레이션을 수행함으로써 초기 로딩 시간을 단축하고 사용자 경험을 향상시킵니다. citeturn0search3
flushSync 함수: 자동 배칭이 적용되지 않기를 원하는 경우, flushSync 함수를 사용하여 특정 상태 업데이트를 즉시 처리하고 렌더링할 수 있습니다. 이를 통해 개발자는 렌더링 타이밍을 세밀하게 제어할 수 있습니다. citeturn0search5
React 서버 컴포넌트 지원: React 18은 서버에서 컴포넌트를 렌더링하고 이를 클라이언트로 전송하는 서버 컴포넌트를 지원하여, 초기 로딩 시간을 단축하고 SEO를 향상시킵니다.
향상된 개발자 도구: React 18은 개발자 도구를 개선하여, 컴포넌트 트리의 상태와 성능을 더욱 쉽게 분석하고 디버깅할 수 있도록 지원합니다.
React 18 업그레이드 가이드 제공: React 팀은 기존 프로젝트를 React 18로 원활하게 마이그레이션할 수 있도록 상세한 업그레이드 가이드를 제공하여, 개발자들이 최신 기능을 쉽게 활용할 수 있도록 지원합니다.
향상된 타입스크립트 지원: React 18은 타입스크립트와의 호환성을 더욱 강화하여, 타입 안정성을 높이고 개발자 경험을 향상시킵니다.

1. 자동 배칭(Auto Batching)

이전에는 여러 개의 setState 호출이 각각 개별적인 렌더링을 유발했지만, React 18에서는 자동으로 하나로 묶여서 렌더링이 최적화됨.

✅ React 17 (렌더링이 여러 번 발생)

import { useState } from "react";

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

  const handleClick = () => {
    setCount((prev) => prev + 1);
    setText("Updated");

    // React 17에서는 각각의 setState가 렌더링을 발생시킴
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>Text: {text}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

✅ React 18 (자동 배칭 적용)

import { useState } from "react";

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

  const handleClick = () => {
    setCount((prev) => prev + 1);
    setText("Updated");

    // React 18에서는 자동으로 배칭되어 한 번만 렌더링됨
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>Text: {text}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

✅ 개선점: 여러 개의 setState 호출이 하나로 배칭되면서 렌더링 성능이 최적화됨.

2. 동시성 기능(Concurrent Features)

React 18에서는 렌더링을 여러 작은 단위로 나누어 더 부드러운 UI를 제공함.

✅ startTransition을 활용한 예제

import { useState, useTransition } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    setCount((prev) => prev + 1);

    // 낮은 우선순위 작업을 동시적으로 처리
    startTransition(() => {
      setCount((prev) => prev + 1000);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      {isPending && <p>Loading...</p>}
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

✅ 개선점: startTransition을 사용하여 긴급하지 않은 업데이트를 나중에 실행하여 UI가 멈추지 않도록 함.

3. useDeferredValue를 이용한 지연 렌더링

useDeferredValue를 사용하면 입력값이 바로 적용되지 않고 부드러운 렌더링을 유지함.

✅ 예제

import { useState, useDeferredValue } from "react";

function Search() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query); // 지연된 값

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <p>Searching for: {deferredQuery}</p>
    </div>
  );
}

✅ 개선점: 사용자가 빠르게 입력하더라도 UI가 즉시 반응하여 부드러운 UX 제공.

4. 서버 사이드 렌더링(SSR)에서 Suspense 활용

React 18에서는 Suspense를 활용해 서버에서 스트리밍 렌더링이 가능함.

✅ 서버에서 데이터를 불러오는 Suspense 예제

import { Suspense, lazy } from "react";

const Profile = lazy(() => import("./Profile"));

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

✅ 개선점: Suspense를 활용하여 서버에서 데이터를 스트리밍 방식으로 받아올 수 있음.

5. flushSync를 활용한 즉시 렌더링

flushSync를 사용하면 특정 업데이트를 즉시 반영할 수 있음.

✅ flushSync 예제

import { useState } from "react";
import { flushSync } from "react-dom";

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    flushSync(() => {
      setCount((prev) => prev + 1);
    });

    // 여기서 UI가 즉시 업데이트됨
    console.log("UI가 즉시 업데이트됨");
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

✅ 개선점: 특정 상태 업데이트를 즉시 반영할 수 있어, 렌더링 타이밍을 더 세밀하게 제어 가능.

6. React 서버 컴포넌트 지원

React 서버 컴포넌트는 서버에서 렌더링하고 클라이언트에서 하이드레이션을 수행하는 방식.

✅ 서버에서 렌더링하는 예제

export default async function ServerComponent() {
  const data = await fetch("https://jsonplaceholder.typicode.com/todos/1").then(
    (res) => res.json()
  );

  return <div>{data.title}</div>;
}

✅ 개선점: 서버에서 데이터를 가져오고 렌더링하여 클라이언트 측의 부담을 줄임.

7. 향상된 타입스크립트 지원

React 18에서는 타입스크립트 지원이 향상되었으며, 새로운 타입 정의가 추가됨.

✅ 타입스크립트 예제

import { FC } from "react";

type Props = {
  name: string;
};

const Greeting: FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

✅ 개선점: 타입 안정성이 강화되어 오류를 줄이고 유지보수성을 높임.

📌 정리

기능 React 18 개선점

자동 배칭	여러 setState 호출이 자동으로 배칭됨
동시성 기능	startTransition을 이용해 긴급하지 않은 업데이트를 나중에 실행
useDeferredValue	지연된 값 렌더링으로 부드러운 UX 제공
Suspense	서버 사이드 렌더링(SSR)에서 데이터 스트리밍 가능
flushSync	특정 업데이트 즉시 반영 가능
서버 컴포넌트	서버에서 데이터를 렌더링하여 클라이언트 부담 감소
타입스크립트	향상된 타입스크립트 지원으로 안정성 증가

✅ 결론: React 18은 성능 최적화, 서버 사이드 렌더링 개선, 동시성 기능 등을 통해 개발자 경험을 향상시킴. 🚀

11. useId Hook 도입 (고유한 ID 자동 생성)

React 18에서는 새로운 useId Hook이 추가되어, 고유한 ID를 자동으로 생성할 수 있음. 이를 통해 클라이언트와 서버에서 일관된 ID를 유지할 수 있음.

✅ 예제 코드

import { useId } from "react";

function Form() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </div>
  );
}

✅ 개선점: useId를 사용하면 여러 컴포넌트에서 중복되지 않는 ID를 자동으로 생성하여 접근성을 향상시킬 수 있음.

12. createRoot를 통한 새로운 렌더링 API 도입

React 18에서는 ReactDOM.createRoot가 도입되어 새로운 동시성 기능을 활성화할 수 있음.

✅ React 17 (ReactDOM.render)

import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

✅ React 18 (createRoot 활용)

import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

✅ 개선점: createRoot를 사용하면 React 18의 동시성 기능을 활성화할 수 있으며, 향후 React 업데이트와의 호환성이 좋아짐.

13. 새로운 스트리밍 서버 렌더링 API (renderToPipeableStream)

React 18에서는 서버 사이드 렌더링을 위한 새로운 스트리밍 API가 도입되어, 더 빠른 페이지 로딩이 가능함.

✅ 기존 renderToString (React 17)

import { renderToString } from "react-dom/server";
import App from "./App";

const html = renderToString(<App />);

✅ 새로운 renderToPipeableStream (React 18)

import { renderToPipeableStream } from "react-dom/server";
import App from "./App";

const stream = renderToPipeableStream(<App />);
stream.pipe(process.stdout);

✅ 개선점: 새로운 스트리밍 API를 활용하면 서버에서 HTML을 점진적으로 전송할 수 있어 페이지 로딩 속도가 빨라짐.

14. useSyncExternalStore 도입 (상태 관리 라이브러리와의 호환성 증가)

React 18에서는 외부 상태(store)를 안정적으로 동기화할 수 있도록 useSyncExternalStore Hook이 도입됨.

✅ 예제 코드

import { useSyncExternalStore } from "react";

function subscribe(callback) {
  window.addEventListener("resize", callback);
  return () => window.removeEventListener("resize", callback);
}

function getSnapshot() {
  return window.innerWidth;
}

function WindowWidth() {
  const width = useSyncExternalStore(subscribe, getSnapshot);

  return <p>Window width: {width}px</p>;
}

✅ 개선점: Redux 등 외부 상태 관리 라이브러리와의 호환성이 증가하고, 서버와 클라이언트 간 일관된 상태 동기화가 가능함.

15. React DevTools 성능 최적화

React 18에서는 React Developer Tools의 성능이 개선되어, 보다 빠르게 상태 변화 및 렌더링을 추적할 수 있음.

✅ 개선점:

Suspense 관련 디버깅 기능 추가
성능 프로파일링 개선
컴포넌트 업데이트 히스토리 제공
동시성 모드에서 발생하는 이슈를 시각적으로 쉽게 확인 가능

📌 React 18 추가 개선점 요약

기능 React 18 추가 개선점

useId Hook	고유한 ID 자동 생성
createRoot	새로운 렌더링 API 도입
renderToPipeableStream	새로운 스트리밍 서버 렌더링 API
useSyncExternalStore	외부 상태(store) 동기화 최적화
React DevTools 개선	성능 최적화 및 동시성 디버깅 기능 추가

✅ 결론: React 18에서는 UI 렌더링 최적화, 서버 사이드 렌더링 강화, 개발자 경험 향상 등 다양한 측면에서 개선이 이루어짐. 🚀

728x90

'웹개발 > reactjs' 카테고리의 다른 글

리액트 + 타입스크립트 기초 2단계: useState & 이벤트 처리 (0)	2025.04.14
리액트 + 타입스크립트 기초 1단계: 환경 설정 & 컴포넌트 기본 (0)	2025.04.14
[리액트] React Query와 Zustand 알아보기 (0)	2025.03.23
[리액트] React Query를 사용하는 이유 (0)	2025.03.23
[리액트] firebase 와 REACT react-router-dom 404 에러 (0)	2025.01.23

현재글[리액트] React18 주요 개선점

250x250

joamashi

Async/Await, 스코프 체인, null, 스코프, await, This, VUE, 비동기, axios, threejs, array, undefined, Async, 호이스팅, 배열, Watch, codepen, 클로저, 최신자바스크립트, 마이크로태스크,

joamashi