🧡React v18.0 업데이트
React v18.0은 지난 3월 업데이트 되었는데, 기존의 업데이트 내용과는 달리 즉시 사용 가능한 개선 사항들이 많이 포함되었으며, 기존 애플리케이션 구축 방식에 큰 영향을 미칠거라는 공식 문서의 문구가 존재하는 만큼 정말 다양한 변화가 있었다.
1. New Root API
2. Automatic Batching
3. Transition
4. Suspence For SSR
하나하나 자세히 알아보며 이번 React 업데이트가 어떤 방향을 추구하고자 했는지 알아보자
💛New Root API
CRA를 통한 리액트 프로젝트를 생성한 기존 구조에서 index.html를 살펴보면, <div id="root"></div>라는 부분이 있었는데, 해당 엘리먼트가 바로 Root이다.
블로그 강동희님의 게시물을 참고하면 아래와 같이 설명하기도 하는데,
// 18v 이전의 루트
ReactDOM.render(, document.getElementById(‘root’));
// 18v 이후의 루트 API
import * as ReactDOMClient from ‘react-dom/client’;
const container = document.getElementById(‘app’);
const root = ReactDOMClient.createRoot(container);
root.render();구조를 보면 알겠지만 ReactDOMClient를 임포트 한 후 기존 app을 Root에 적용해 render()하는 방식이다. 즉, 기존 과정에서 render가 이루어지려면 Root를 거쳐간 후 진행이 되어야만 했는데, 이는 Virtual DOM을 사용하는 React특성상 반드시 필요한 작업이 아닐 뿐더러, 불필요한 리소스 낭비가 발생하기 때문이다.
그러므로, 새로 개발된 ReactDOMClient를 사용하여 render()가 호출되어야 할 시기를 정할 수 있다.
💚Automatic Batching
우선 Batching이란, state의 변경이 감지될 때, 바로 수정사항을 반영해 리렌더링하지 않고, 블록 내의 변화를 일괄적으로 묶어 함께 수정한 후 리렌더링 하는 방식을 의미한다.
여담이지만, useState를 사용할 때 이전의 값을 활용하여 증감하는 카운트를 구현하는 경우, prev함수를 콜백으로 받아 처리해야하는 경우도, Batching을 통한 일괄 처리 때문에 같은 함수의 변화가 무시당하지 않기 위해서 실행하는 것
const [count, setCount] = useState(0)
function increase() {
setCount(count+1)
setCount(count+1)
setCount(count+1)
// count: 1
}
// prev 사용
function another() {
setCount(prev => prev+1)
setCount(prev => prev+1)
setCount(prev => prev+1)
// count: 3
}
import {flushSync} from 'react-dom'
// ReactDOM.flushSync() 사용
function flush() {
flushSync(() => {
setCount(count+1)
})
flushSync(() => {
setCount(count+1)
})
flushSync(() => {
setCount(count+1)
})
// count: 3
}각설하고, React v18.0이 업데이트 되며, 기존 function내에서만 Batching이 이루어진 기존 React와는 달리, async, function, setTimeout등을 포함한 기존 Native Event Handle마저 모두 자동 지원한다.
💙Transition
Transition을 통해 빠르게 업데이트되어야 하는 상태와, 매 순간 업데이트 하지 않아도 되는 상태를 구분하여 성능을 확보할 수 있다.
import { useTransition } from 'react'
// isPending -> Boolean 타입이며, transition작업이 처리되었는가? 를 나타낸다.
// timeoutMs -> startTransition 내부에서 업데이트 된 state는 ms초 후 우선순위 큐에 담긴다.
const [isPending, startTransition] = useTransition({ timeoutMs: ms })즉 언제 사용되는가의 예시로, 포털사이트 검색 기능을 구현할 때 검색창에 입력되어야 하는 input value는 기존 상태관리대로 매번 업데이트 되어야하는 대상이지만, 검색 이후 결과는 매번 검색어를 통한 조회가 이루어진다면 상당한 과부하가 걸리므로 이런 때에 useTransition을 활용하여야 한다.
💜 Suspence For SSR
Suspense를 활용하여 데이터를 서버측에서 불러오고, 그동안 fallback에 입력된 컴포넌트를 활용해 화면의 레이아웃을 표시한 후 데이터가 모두 불러졌을 때 해당 데이터로 변경하여 화면을 구성할 수 있다.
이는, 작업량이 많은 컴포넌트를 불러올 때 사용자 경험상 매우 확연한 차이를 일으킬거라 생각한다.
<Suspense fallback={<LoadingBar />}>
<LazyComponent />
</Suspense>간단하게 React v18.0의 변경사항을 알아보았으며, 굉장히 활용하기 좋은 소스들이 많이 생긴 것 같아 FE개발을 준비하며 기분이 좋다.
React의 버전 업데이트를 기다렸다가 공식문서를 참조하여 버전별 업데이트 내용을 정리하면 도움이 많이 될 것 같음
