[React] React Version 18

노유성·2023년 6월 15일

☀️들어가며

React 18에는 무엇이 있는지 업그레이드를 어떻게 하는 지에 대해서 알아보자.

⭐Automatic batching

🪐batching이란?

React에서 batching은 여러 개의 상태 업데이트나 렌더링 작업을 단일 작업으로 그룹화하여 실행하는 기술을 의미합니다. React는 가상 DOM(Virtual DOM)을 사용하여 업데이트를 처리하며, 업데이트가 발생할 때마다 컴포넌트의 렌더링을 수행합니다.
일반적으로 React에서 상태를 업데이트하는 경우, 해당 업데이트는 즉시 실행되지 않고 대기열에 추가됩니다. 대기열에 여러 업데이트가 쌓인 상태에서 React는 이러한 업데이트를 효율적으로 처리하기 위해 batching을 사용합니다. 즉, 여러 개의 상태 업데이트를 하나의 단일 작업으로 묶어서 처리하는 것입니다.
-chatGPT

function handleClick() {
  setState1(newValue1);
  setState2(newValue2);
}

위와 같은 코드가 있다고 가정할 때 각각의 setter 함수에 의해 2번의 렌더링이 발생한다. 하지만 batching을 이용하면 두 번의 렌더링을 단일 작업으로 처리한다.

version 18 이전에는 api 호출에 콜백으로 넣은 함수나 비동기 함수에서는 작동하지 않았지만 리엑트 18이후부터는 가능하다.

🪐batch를 처리하지 않으려면?

update이후에 즉시 레이아웃을 계산하는 경우에는 기존에 리엑트의 비동기적인 방식이 적합하지 않을 수도 있다. flushSync는 이러한 비동기를 우회하고 업데이트를 즉시 처리하고 렌더링을 동기적으로 수행하는 데 사용된다. react가 해당 업데이트를 완료하기 전까지는 Componenet 트리가 업데이트 되지 않는 것을 의미한다.

예제로, 위와 같은 코드를 작성하게 될 경우, setCount 함수는 즉시 실행되며 dom 업데이트가 진행된다.

⭐Suspense on the server

🪐서버사이드 렌더링의 구조

서버에서 전체 앱에 대한 데이터를 가져온다.
서버에서 전체 앱을 HTML로 렌더링하고 응답으로 보낸다.
Client에서 전체 앱에 대한 js코드를 로드한다.
Client에서 JS 논리를 전체 앱에 대해 서버 생성 HTML에 연결한다.(Hydration)

쉽게 말해서 Hydration은 SSR을 진행할 때 서버측에서는 정적인 문서와 번들링된 js코드를 client에게 보내주는데 정적인 문서에 핸들러 함수들을 연결해서 동적인 페이지를 보여주는 것. 즉, 메마른 DOM에 동적인 핸들러를 연결해주는 것이다.

🪐한계점

하지만 위와 같은 방식의 최대 단점은 다음 단계가 시작되기 전에 각 단계가 전체 앱에 대해서 한 번에 완료가 되어야 한다는 점이다. 즉, 대부분의 Component가 html의 생성이 빠르다고 하더라고 특정 Component가 html 생성이 느리다면 다른 Component는 느린 Component를 기다려야 하고 결국엔 비효율적으로 움직이게 된다.

이를 방지하고자 react 18에서는 suspense로 문제를 해결했다.

🪐예시

⭐Transition

위와 같이 검색을 할 수 있는 input과 검색 관련 단어를 보여주는 창이 있다고 가정했을 때 input이 변경될 때마다 결과창이 업데이트가 되며 이는 성능에 문제를 줄 수도 있다.

그래서 이 부분을 두 가지의 부분으로 UI를 나누어서 검색창은 useState를 이용해서 즉각적으로 바뀌기를 기대하고 결과창은 기대하지 않게 나눌 수 있다.

위와 같이 startTransition()으로 수행할 함수를 감싸면 긴급하지 않은 업데이트를 보류할 수 있다.