React 18 변경점 정리

 

오늘은 React19 release version이 나오기 전에 React 18의 큰 변경점에 대해 살펴보려고 한다.

현재 기준 React 가장 최신 버전은 18.3.1 이다.(2024년 4월 26일) 

그리고 React18은 2022년 3월 29일에 정식 릴리즈 되었다.

 

 

 

 

 

 

 

 

1. 동시 렌더링(Concurrent Rendering)

 

동시 렌더링(Concurrent Rendering)은 사용자 인터페이스(UI)를 더 유연하고 효율적으로 렌더링할 수 있게 해주는 기능으로, 전통적인 렌더링 방식에서는 컴포넌트 트리가 변경될 때, 변경 사항이 한 번에 렌더링되면서 오랜 시간이 소요되며 UI가 멈추는 것처럼 보이는 문제가 발생하였다. 동시 렌더링(Concurrent Rendering)은 이러한 문제를 해결하기 위해 React가 필요한 작업을 중단하거나 우선순위를 조정하면서 렌더링 작업을 병렬로 수행할 수 있도록 도와주는 기능이다.

 

- 작업 중단 및 재개 가능: 오래 걸리는 작업을 한 번에 모두 처리하지 않고, 필요한 경우 진행중이던 작업을 중단 했다가 나중에 다시 재개할 수 있다.

 

- 우선순위 기반 작업 스케줄링: 렌더링 작업의 우선순위를 설정하여 사용자 인터렉션이 더 중요한 상황에서는 해당 작업을 먼저 처리하고, 그렇지 않은 작업은 나중에 실행한다. 이를 통해 사용자로 하여금 더 쾌적한 경험을 제공할 수 있다.

 

- Suspense 및 Lazy Loading과의 통합: 동시 렌더링(Concurrent Rendering)을 사용하면 Suspense와 React.lazy를 사용하여 컴포넌트가 로딩 중일 때 비동기적으로 UI를 표시할 수 있다. 이 방식으로 대기시간을 줄이고 사용자 경험을 향상 시킬 수 있다.

 

- 점진적 하이드레이션 (Progressive Hydration): 서버사이드 렌더링(SSR)과 결합하여 React가 페이지의 중요한 부분부터 수화를 시작하여 초기 로딩 시간을 줄이는 방식으로, 페이지가 로드되지마자 상호작용이 필요한 부분부터 처리하고 나머지 부분은 나중에 처리하여 성능을 개선할 수 있다.

 

* 기존에는 JavaScript특성상 동시 렌더링 방식이 불가능했다. JavaScript의 단일 스레드 구조와 React의 초기 렌더링 방식(동기적 렌더링 방식)때문이었다. React 16에서 Fiber 아키텍쳐가 도입되면서 비동기적 렌더링 방식으로의 변화가 가능해졌고, 이를통해 동시 모드(Concurrent Mode)라는 새로운 방식이 도입 될 수 있었다. 

 

 

 

2. 자동 배칭(Automatic Batching)

 

여러 상태 업데이트를 자동으로 하나의 배치로 묶어서 처리해준다. 이전 버전에서는 이벤트 핸들러 내에서만 배칭이 이루어졌지만, 이제는 비동기 함수나 타이머 등에서도 자동으로 배칭이 적용된다.

 

import { useState } from 'react';

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

  const handleClick = async () => {
    setCount(count + 1);
    setText('Updated');

    await new Promise(resolve => setTimeout(resolve, 1000));

    setCount(count + 2);
    setText('Updated again');
  };

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

 

위 코드에서 hadleClick을 실행하면, count와 text의 상태 업데이트가 두 번 발생하지만 React 18에서는 한 번의 렌더링만 발생한다. 비동기 작업 안에서도 자동 배칭이 적용되기 때문이다. 

 

 

 

 

3. 전환(Transitions)

 

사용자의 인터페이스의 상태 변화 중에 긴급하지 않은 작업과 긴급한 작업을 구분해 처리하는 기능이다. 이를 통해 UI 업데이트를 더 부드럽게 만들고 사용자가 느끼는 반응성을 개선할 수 있다. 긴급하지 않은 작업을 transition으로 표시하면 react는 해당 작업을 배경에서 처리하고, 중요한 작업을 우선순위에 따라 먼저 실행한다.

 

전환(Transition)의 주요 개념 

- 즉각적인 업데이트(Urgent Updates): 버튼 클릭, 입력 필드 등 사용자 입력에 즉각적으로 반응해야 하는 업데이트. 반응이 빠르게 이뤄져야 하므로 높은 우선순위로 즉시 처리된다.

 

- 전환 업데이트(Transition Updates): 페이지 이동, 리스트 필터링 등과 같이 시간 지연이 허용되는 업데이트. 전환 업데이트는 사용자 입력에 즉각적이지 않아도 되므로 배경에서 처리될 수 있다.

 

 

4.서스펜스(Suspense)확장

 

데이터 페칭을 위한 서스펜스가 더욱 강화되었다. 비동기적으로 데이터를 가져오는 동안 로딩 상태를 쉽게 관리할 수 있고, 서버사이드 렌더링과의 호환성도 개선되었다. 

 

 

5. 루트 API  (New Root API)

 

ReactDOM.createRoot API가 도입되어 기존의 ReactDOM.render 대신 이를 사용하여 애플리케이션을 렌더링할 수 있다. 새로운 루트 API는 동시 모드와 같은 새로운 기능들을 활용할 수 있게 해준다.

 

 

6. useId 훅 (useId hook)

 

고유한 ID를 생성하여 서버와 클라이언트 간의 일관성을 유지할 수 있게 해준다. 이는 특히 서버사이드 렌더링에서 유용하며 접근성 향상에도 도움을 준다.

 

import { useId } from 'react';

function MyComponent() {
  const id = useId();
  return <input id={id} />;
}

 

 

7. 새로운 훅 추가

 

- useSyncExternalStore: 외부 저장소와의 동기화를 위한 훅으로, 상태관리 라이브러리와의 통합을 용이하게 해준다. (Redux, Mobx, zustand 등)

- useInsertionEffect: 스타일 라이브러리와의 통합을 위한 훅으로 스타일 삽입 시점을 제어할 수 있다.

 

 

8. 서버 사이드 렌더링 개선(SSR)

 

스트리밍 SSR이 도입되어 초기 로딩 속도가 빨라졌으며 서스펜스를 활용한 데이터 페칭이 가능해져 SSR과 CSR의 경계를 더욱 유연하게 사용할 수 있다. (빠른 초기 로딩 및 SEO최적화, 사용자 경험 향상)

 

 

9. 선택적 하이드레이션(Selective Hydration)

 

필요한 부분만 하이드레이션하여 초기 로딩 성능을 최적화할 수 있다. 이를 통해 대규모 애플리케이션에서도 효율적인 렌더링이 가능해졌다. (성능 최적화 및 리소스 절약)

 

 

10. React 서버 컴포넌트 (React Server Components)

 

서버에서만 실행되는 컴포넌트를 작성할 수 있게 해주는 기능으로, 클라이언트로 전송되는 자바스크립트의 양을 줄이고 성능을 향상시킬 수 있었다. (번들 크기 감소 및 렌더링 성능 향상)

 

11. 개발자 도구 및 디버깅 성능 향상

 

React DevTools가 업데이트되어 새로운 동시 모드 기능과 전환 상태에 대한 지원이 향상되었고, 이를 통해 개발자가 애플리케이션의 상태를 더욱 쉽게 파악하고 디버깅 할 수 있다.

 

 

12. 성능 최적화 및 버그 수정

 

다양한 내부 최적화가 이루어져 전반적인 성능이 향상 되었고 기존 버전에서 발견된 여러 버그들이 수정되었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

https://github.com/facebook/react/releases

 

https://react.dev/