[React] 리액트 버전 17 VS 18

이번 주제도 스타트업 면접에서 받은 질문이다

암기력 테스트 같아서 좋아하진 않는 질문이지만 질문을 받은 김에 정리해 보려고 한다

 

2022년 3월 업데이트 된 React 18.0.0 버전의 주요 키워드는 "Concurrency(동시성)"이다

동시성이란 자바스크립트의 싱글 스레드라는 한계를 극복하여 사용자 경험을 향상시키기 위해 여러 작업을 다루는 해결책이다

실제로 여러 작업이 병렬로 처리되진 않지만 여러 작업들을 빠르게 전환하면서 동시에 수행되는 것처럼 느끼게 해준다

 

이러한 동시성 모드를 사용하기 위해서는 index.js에서 이전 버전의 root.render() 메서드 대신에 createRoot() 메서드를 사용하면 되는데 CRA(create-react-app)로 프로젝트를 빌드하면 자동으로 설정된다

1.Automatic Batching

Automatic Batching이란?

여러 개의 state 업데이트를 단일 re-rendering으로 처리하여 성능을 개선한 기능

리액트 17버전에도 존재했지만, 이벤트 핸들러와 생명주기 메서드를 사용할 때에만 지원하였고 setTimeout 내부거나 콜백함수가 포함된 경우엔 지원하지 않았다.

(사용할 일은 적겠지만 flushSync() 메서드로 Automatic Batching을 피할 수 있다)

 

Concurrent Feature (Suspense, Transition)

싱글 스레드인 자바스크립트의 문제를 동시성을 통해 해결하고자 나온 기능들로 Suspense와 Transition이 있다

 

2.Suspense and SSR

Suspense는 렌더링이 오래걸리는 컴포넌트가 렌더링 되기 전까지 fallback 컴포넌트를 보여주고 그 외의 컴포넌트를 먼저 렌더링할 수 있도록 해준다

<Suspense fallback={<Loading />}>
  <Posts />
</Suspense>

 

기존 SSR에서는 서버로부터 data fetch가 끝나야 화면에 보여주는게 가능했다. 모든 js 코드를 로딩하기 전엔 hydration 단계로 넘어갈 수 없었다

hydration은 렌더링된 요소들이 유저와 상호작용이 가능하도록 하는 과정이다

 

 

3.UseTransition hook

useTransition은 비교적 중요하지 않은 작업의 우선 순위를 낮추어서 우선순위가 높은 작업으 끝난 후 동작되도록 한다

기존에 사용자 경험을 개선하기 위해 사용했던 debounce, throttle, setTimeout 등을 대체할 수 있다

블로킹 렌더링 문제: 한번 렌더링연산이 시작되면 멈출수 없음. 렌더링 중에도 우선순위가 높은 작업에 양보

const [isPending, startTransition] = useTransition()
startTransition(()=>{
  <우선순위를 낮출 작업>
})

 

 

 

쉽게 떠먹여주는 React 18 업데이트

https://react.dev/blog/2022/03/29/react-v18