[React] 18버전의 추가된 새로운 기능 (step- 2)

개요

• React DOM Client
• React DOM server
• Automatic batching
• Concurrent Feature
• 기타 변경 사항

 

 

 

---

✅ React DOM Client

 

📦 createRoot 사용

• React 18버전의 새로운 기능과 API를 사용하기 위해서는 기존에 render만을 사용해서 root를 생성하는 것이 아닌 createRoot를 사용해야 한다.

before & after

before

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
  	<App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

after

import React from "react";
import ReactDOM from "react-dom/client";

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

 

 

 

---

✅ Authmatic batching

기존 18버전 이전에서는 이벤트 핸들러와 생명주기 메소드를 사용할 땐 배치처리를 지원하지만 콜백 함수(Promise, setTimeout...)가 포함된 경우 배치 처리를 지원하지 않았다. 하지만 ReactDOM.createRoot 메서드를 기반으로 랜더링을 진행할 경우 모든 state update 작업은 자동으로 Batching 처리된다.

 

- Batching

여러 상태 업데이트를 하나의 리랜더링으로 처리하여 성능을 향상시키는 방법으로 한번의 클릭으로 두 개의 상태를 업데이트 한다면, 이를 하나의 리랜더링으로 처리할 수 있도록 해주는 것 이를 통해 불필요한 리랜더링을 방지한다.

 

📦 사용 예시)

• 각각의 작업이 batch 처리된다는 것이 중요하다.
• 이벤트 핸들러 내에서 실행된 두개의 setTimeout이 딜레이가 같을 때 같이 batching된다는 신기한 현상도 일어난다.

import { useLayoutEffect, useRef, useState } from 'react';

function App() {
  const [test, setTest] = useState(1);
  const testRef = useRef<any>(0);

  const trigger = () => setTest((prev) => {
    console.log(prev + 1);
    return prev + 1;
  });


  const changeState = async () => {
    if (testRef.current) {
      clearTimeout(testRef.current);
      testRef.current = null;
    }

      // 요 안에서 한 개의 update function 은 하나로 batching 됨.
      trigger();
      trigger();

      // 1.5초 후에는 4개의 update function 을 하나로 batching 시킴.
      setTimeout(() => {
        trigger();
        trigger();
      }, 1500);
      setTimeout(() => {
        trigger();
        trigger();
      }, 1500);

      testRef.current = setTimeout(() => {
        // 1초 후에는 두 개의 update function 을 하나로 batching 시킴
        trigger();
        trigger();
      }, 1000);
      return;
  }

  useLayoutEffect(() => {
    console.log('render');
  })

  return (<div>
    	<button onClick={changeState}>change it</button>
		<p> {test}</p>
	</div>);
}

export default App;

 

 

 

---

✅ Concurrent Feature

React 18의 중요한 추가 기능으로 동시성을 효율적으로 진행할 수 있는 기능인 Suspense와 Transition을 지원하며, 이러한 기능을 통해 한 번에 여러 동작을 수행해 사용자 경험을 향상시킬 수 있다.

 

- Concurrent Mode(동시성)

싱글스레드 기반인 Javascript는 여러 작업을 동시에 처리할 수 없는 문제점이 있는데 이를 보완하기 위해 여러 작업을 작은 단위로 나누고 우선 순위를 정해 작업을 번갈아 수행하는 것을 말한다. 이는 동시에 수행되는 것은 아니지만 작업 전환이 빠르기에 동시에 수행되는 것처럼 보여 사용자 경험을 향상시킨다. 

 

📦 Suspense)

• Suspense로 렌더링을 원하는 컴포넌트를 감싸주어 랜더링이 완료되기 전까지 fallback 내부의 컴포넌트를 사용자에게 보여주며 이 때 children은 일시 중단된다.
• 사용자에게 보여주고 싶은 컴포넌트를 먼저 렌더링 할 수 있게 해준다. (우선 순위)

 

📦 Transition)

• setState(상태 업데이트)의 우선순위를 설정하여 렌더링 결과를 분기 처리하게끔 할 수 있다. (isPending)
• isPending은 state를 업데이트했음에도 리렌더링하지 않고 UI를 잠시 유지하여 사용자의 경험을 향상시킬 수 있다.

 

 

 

---

✅ 기타 변경 사항

 

📦 Stricter Strict Mode)

• React는 향후에 마운트가 해제된 사이에도 상태를 유지할 수 있는 기능을 제공할 예정으로 이를 위해 Strict Mode에 새로운 개발 모드 전용 체크를 도입하게 되었다.
• 더블 렌더링을 통해 상태 변경이 예측 가능한지를 확인하고, concurrency feature와 함께 작동할 때의 문제를 조기에 발견할 수 있도록 한다.
• 개발 단계의 도구이며 프로덕션 빌드에는 영향을 주지 않는다.

 

📦 일관된 useEffect 타이밍)

• 기존에는 실행 타이밍이 브라우저 환경에 따라 약간의 차이가 있을 수 있었고 특히 SSR과 클라이언트 사이에서의 hydration 과정에서 불일치가 발생할 수 있었다.
• 여러 매커니즘 및 알고리즘 개선을 통해 useEffect를 포함한 hooks의 동작을 더 예측 가능하게 만들었으며, automatic batching을 통해 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선ㅇ할 수 있게 되었다.

 

📦 엄격해진 hydration 에러)

• 기존에는 클라이언트와 서버 사이의 HTML 내용이 약간 다를 경우 경고가 발생했지만 대부분의 경우 애플리케이션을 실행할 수 있던 반면 React 18에서는 좀 더 엄격하게 처리되어 이를 오류로 발생시켜 개발자가 인지하기 쉽게끔 바뀌었다.

 

- hydration

서버에서 랜더링 된 HTML에 JS가 더해져 React 컴포넌트로 활성화되는 과정으로 HTML만 전달돤 상태를 건조한 상태로 정의하고 활성화되어 유저의 인터렉션이 가능한 상태가 되는 것이 hydration이다.

 

📦 일관된 Suspense 적용)

• suspense는 비동기 데이터를 좀 더 효율적으로 처리할 수 있도록 하며 서버에서 미리 데이터를 로드하고 클라이언트 측으로 전송하기 전에 애플리케이션의 초기 상태를 준바히는 과정이 개선되어 사용자 인터페이스가 부드럽게 반응하도록 하였다.
• 이러한 suspense를 일관되게 적용함으로 개발자 경험이 개선되고 성능 최적화에도 기여한다.