리액트 18 달라진 점

✦ React18에서 업데이트 된 기능

1. 자동배치(Automatic Batching)

1.1. 기존의 배치

• 배치란 여러개의 state 업데이트를 하나의 rerender가 발생하도록 그룹화하는 작업을 의미한다.
• 배치 작업은 리액트 이벤트 핸들러 내에서만 수행되므로
  promise 내부 업데이트, setTimeout, 기본 이벤트 핸들러, 기타 이벤트에서는 처리되지 않았다.

1.2. react 18 이후의 자동 배치

• 일반적인 리액트 이벤트 핸들러 함수 스코프에서 state 업데이트가 일어나지 않더라도 자동으로 배치를 적용시켜준다. (자동 배치를 사용하기 위해서는 컴포넌트 트리를 기존의 ReactDOM.render 함수 대신
  새로운 ReactDOM.createRoot 함수를 사용해야 한다.)

2. 전환(Transitions)

• 긴급 업데이트와 긴급하지 않은 업데이트를 구분하기 위한 리액트의 새로운 개념
• 긴급 업데이트(Urgent updates) : 직접적인 상호 작용 반영(타이핑, 오버, 스크롤링 등)
• 전환 업데이트(Transition updates) : 하나의 뷰에서 다른 뷰로의 UI 전환, 화면에 즉시 나타나는 걸 기대하지 않는 영역

react 18 부터는 startTransitionAPI 제공으로
전환 업데이트를 명시적으로 구분하여 상태 업데이트를 진행할 수 있게 되었다.

3. suspense를 지원하는 새로운 SSR 아키텍쳐

• 동적 import를 사용하여 컴포넌트를 렌더링할 수 있게 해주는 함수인 React.lazy를 서버 사이드 렌더링에서 사용할 수 있게 되었다.

React 18부터는 새로운 렌더링 API인 pipeToNodeWritable 덕분에,
<Suspense>와 함께 lazy 컴포넌트를 사용할 수 있게 되어 앱을 더 작은 독립적인 유닛으로 만들 수 있다.

suspense ssr -> 선택적 hydration가능해짐
기존 ssr은 모든 data fetch가 끝나야 어떤 것이라도 보여줄 수 있다.
모든 자바스크립트 코드를 로딩하기 전에는 hydrataion 단계로 넘어갈 수 없다.
앱이 상호 작용할 수 있는 상태가 되려면 앱 전체가 hydration이 완료되어야한다.

4. 새로운 Hook

• useId
• useTransition
• startTransition
• useDeferredValue
• useSyncExternalStore
• useInsertionEffect

5. 새로운 Client API, Server Rendering API

✦ React18에서 추가된 hook

1. useId

• 클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있음.

2. useTransition, startTransition

• 일부 상태 업데이트를 not urgent로 표시.
• 표시되지 않은 상태 업데이트는 긴급한 것으로 간주.

3. useDeferredValue

• 트리에서 급하지 않은 부분의 재랜더링을 지연 가능.
• 이는 debounce와 달리 고정된 지연시간이 없어
  첫번째 랜더딩이 반영되는 즉시 지연 랜더링을 시도하며 지연된 랜더링은 인터럽트가 가능하고
  사용자 입력을 차단하지 않는다.

4. useSyncExternalStore

• 스토어에 대한 업데이트를 강제로 동기화하여 외부 스토어가 concurrent read를 지원할 수 있도록 함.

5. useInsertionEffect

• css-in-js 라이브러리가 렌더링 도중에 스타일을 삽입할 때 성능 문제를 해결할 수 있음.