React 18에서 알아야 할 세가지(What You Need to Know About React 18)

Sheeraz Shaikh의 What You Need to Know About React 18을 번역하였습니다.

 

> Going to see the original article <

 

---

 

React 18에서 알아야 할 세가지

Facebook 팀에서 다가올 React 18의 계획을 발표했습니다.

 

Facebook 팀은 the plan for React-18을 개재했습니다. React에서 즉시 제공할 많은 흥미로운 특징들이 있습니다. 사용자 경험을 향상시키는 것 뿐만 아니라 React 개발자의 업무에 도움이 되는 기능들입니다. 지금부터 곧 출시될 세가지 주요 특징들을 소개하겠습니다.

 

1. Automatic Batching

React에서 여러 개의 state 갱신을 단일 re-render로 묶어 더 나은 성능을 제공하는 Batching입니다.

 

예를 들어, 동일한 클릭 이벤트에서 두 개의 state 업데이트를 한다고 가정합니다. React는 항상 이 두  개의 상태변경을 단 하나의 re-render로 batch합니다. 아래 코드를 보면, 클릭할 때마다 React는 단 한 번의 render를 수행합니다. state가 두번 설정되는데도 말이죠.

불필요한 re-render를 하지 않아 성능이 좋아집니다. 또한 하나의 state 값만 갱신되면서 "반만 완료된(half-finished)" 상태로 렌더링하면 버그를 유발할 수 있는데 이것을 방지할 수 있습니다. 이것은 마치 식당 점원이 당신이 주문할 음식을 하나씩 부를 때마다 주방으로 달려가는게 아니라 주문이 완료될때까지 기다리는 것입니다.

 

이전에는 React는 batch로 언제 갱신하는지에 대해서 일관되지 않았습니다. 예를 들어 위의 handleClick 함수에서 데이터를 fetch하고 state를 업데이트할 때, React는 상태 업데이트를 batch하지 않고 각각 업데이트(independent updates)할 것입니다.

 

React는 단지 브라우저 이벤트(click과 같은) 동안에만 상태 갱신을 batch했기 때문에 이벤트가 처리된 이후에(예시에서는 fetch 콜백함수) 상태를 갱신합니다.

React 18 이후에 업그레이드될 automatic batching에서는 더이상 state가 어디에서 비롯되는지 신경쓰지 않습니다. 항상 한번의 re-render만 수행할 것입니다.

 

batch하고 싶지 않을 때는?

이 경우, /flushSync를 사용하여 re-render할 수 있습니다.

 

2. SSR support for Suspense

이 특징은 서버사이드 렌더링(SSR)의 확장입니다. 일반적인 React SSR 어플리케이션에서는 다음 4 단계가 실행됩니다.

 

• 서버에서 UI에서 보여야 할 관련 데이터를 fetch합니다.
• 서버가 전체 어플리케이션을 HTML로 렌더링하여 클라이언트에 응답으로 보냅니다.
• 클라이언트는 Javascript 번들(HTML로부터 떨어져나온) 파일을 다운받습니다.
• 마지막으로 클라이언트는 위의 Javascript 로직을 HTML에 연결합니다. (이 과정을 hydration이라고 합니다.)

일반적인 SSR 어플리케이션에서의 문제는 다음 단계를 시작하기 전에 각 단계가 전체 어플리케이션에 대해 한번에 끝내야 한다는 것입니다. 이렇게 하면 처음 로드 시 앱이 약간 느려지고 응답하지 않습니다.

 

React 18은 이 문제를 해결하려고 합니다. <Suspense> 컴포넌트는 앱을 앞서 언급한 각 단계를 수행하는 작은 독립 단위로 분해하는 방식으로 혁신되었습니다.

---

글쓴이 각주
https://github.com/reactwg/react-18/discussions/37에서 자세하게 설명하고 있다.

Our solution is to break the work apart so that we can do each of these stages for a part of the screen instead of entire app.

 

3. Transition

이것은 곧 출시될 놀라운 기능입니다. 큰 화면상에서 빈번한 업데이트가 일어나는 문제를 해결할 수 있습니다. 예를 들어, 입력 필드를 타이핑하면 입력값으로 data 목록을 필터링하는 기능을 생각해봅시다. state에 입력 필드 값을 저장해야 data를 필터링하고 input 영역의 값을 제어할 수 있을 것입니다. 아래 코드처럼 구현할 수 있습니다.

// Update the input value and search results
setSearchQuery(input);

여기서, 사용자가 문자를 하나하나 입력할 때마다 입력 필드 값을 갱신하고 갱신된 새 값으로 목록을 검색하고 결과를 보여주게 됩니다.

큰 화면에서 이 코드가 있다고 가정하면, 화면의 모든 요소를 렌더링하는 동안 페이지에 랙을 유발할 것입니다.

타이핑하는 등 다른 상호작용들이 느리고 반응이 없는 것처럼 보일 것입니다. 목록이 그리 길지 않다 하더라도 매번 한 글자씩 입력할 때마다 리스트 아이템 그 자체가 복잡하고 다릅니다. 따라서 렌더링을 최적화할 수 있는 분명한 방법이 없었습니다.

 

개념적으로 이 문제는 두 가지 업데이트가 있어야 합니다. 첫 번째 업데이트는 입력 필드 및 입력 필드 주변의 일부 UI를 변경하기 위한 긴급 업데이트(urgent update)입니다.  두 번째 업데이트는 검색 결과를 표시하는 덜 급한 업데이트(less update)입니다.

// Urgent: Show what was typed
setInputValue(input);

// Not urgent: Show the results
setSearchQuery(input);

새로운 startTransition API는 업데이트를 "전환"(transition)으로 표시하는 기능을 제공하여 이 문제를 해결합니다.

import { startTransition } from 'react';
// Urgent: Show what was typed
setInputValue(input);
// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

 

React 18 Working Group

Facebook에서 잘 알려진 라이브러리들의 author, maintainer들을 위한 working group을 생성했습니다. 그들은 이 특징들에 대해 사전 피드백을 주기 위해 논의하고 있습니다. 해당 논의들은 관심있는 누구든지 볼 수 있도록 열려 있습니다. 제가 팔로잉하는 링크를 공유합니다.

 

• https://github.com/reactwg/react-18/discussions/4
• https://github.com/reactwg/react-18/discussions/41
• https://github.com/reactwg/react-18/discussions/21

좋은 점은 React 18에는 변경 사항이 없기 때문에 현재 저장소를 최신 버전으로 업그레이드할 때, 코드 변경이 거의 필요하지 않거나 전혀 없습니다. 그러는 동시에 우리는 이 멋진 특징들을 즐길 수 있습니다. 읽어주셔서 감사합니다.

 

References:

• https://www.youtube.com/watch?v=Cp7RYtp-NKo&t=617s
• https://www.youtube.com/watch?v=bpVRWrrfM1M&t=185s