[리액트(React)] React 18 버전 변경 및 추가 사항

// Automatic Batching

- 여러 개의 state 업데이트를 각각 처리하는 것이 아니라 묶어서 한 번에 처리하는 것

- 재렌더링 횟수를 줄일 수 있다.

setTimeout(() => {     setCount(...);     setName(...) }, 1000);
이전	버전 18
setCount(...) 처리 후 재렌더링 setName(...) 처리 후 재렌더링	setCount(...) 처리 후 setName(...) 처리까지 한 후 재렌더링

---

// Transition

- 긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 긴급한 업데이트를 먼저 처리한다.
   ~ 긴급한 업데이트 : 사용자와 직접적인 인터랙션 有
   ~ 긴급하지 않은 업데이트 : 사용자와 직접적인 인터랙션 無

- 긴급하지 않은 업데이트가 실행 중이더라도 긴급한 업데이트가 필요하면 중단될 수 있다.

import { startTransition } from 'react';

setInput(input); //입력값 화면에 바로바로 보여주기 > 긴급 업데이트

startTransition(() => {
    setResult(input); //입력값에 따른 결과 보여주기 > 긴급하지 않은 업데이트
});

---

// Suspense

- 하위 컴포넌트가 준비되기 전까지 렌더링을 중단하는 것

- 클라이언트 사이드 렌더링만 가능했는데, 서버 사이드 렌더링도 가능하도록 업데이트 되었다.

- Transition API와 연동할 수 있게 되었다.

import { laxy, Suspense } from 'react';
import { Loading } from './Loading';
const ChildComponent = lazy(() => import('./ChildComponent'));

function MainComponent(props) {
    return (
        <Suspense fallback={<Loading />}>
            <ChildComponent />
        </Suspense>
    );
}

> ChildComponent가 준비되기 전까지 fallback 안에 있는 Loading 컴포넌트를 실행하고, 준비되면 ChildComponent를 실행한다.

---

// React DOM Client

이전	버전 18
ReactDOM.render(     <React.StrictMode>         <App />     </ React.StrictMode >          document.getElementById('root'); );	const root = ReactDOM.createRoot(document.getElementById('root')); root.render(   <React.StrictMode>     <App />   </React.StrictMode> );

// React DOM Server

이전	버전 18
● renderToString     - 컴포넌트 트리를 HTML 문자열로 변환하는 함수	● renderToPipeableStream     - NodeJS 환경에서 스트리밍을 위한 함수 ● renderToReadableStream     - Edge runtime 환경을 위한 함수

---

// Strict Mode

- 개발 모드에서 Strict Mode를 사용하면 컴포넌트를 unmount 시켰다가 다시 한 번 mount 시킨다.

---

// Hook 추가

• useId()
  - 서버 & 클라이언트에서 고유한 값을 생성하는 hook
  - List의 key 에 사용하는 용도 x
  
  
• useTransitions()
  - 긴급하지 않은 업데이트를 다루는 hook
  ≒ startTransition()
  
  
• useDeferredValue()
  - 긴급하지 않은 업데이트의 재렌더링을 미루는 hook
  - 지연된 렌더링
  
  
• useSyncExternalStore()
  - 외부 저장소를 구독할 수 있게 해주는 hook
  - state와 외부 저장소를 연동할 수 있다.
  
  
• useInsertionEffect()
  - 렌더링 과정에서 style 삽입의 성능 문제를 해결하는 hook
  - css 라이브러리에서 사용한다.