리액트 18: 무엇이 달라졌나? 요약 및 간략 후기

 

React v18 후기

 

2022년 3월 출시된 리액트 18의 기존 버전과의 가장 큰 차이점은 바로 동시성(Councurrency) 지원이다.

동시에 여러 작업을 효율적으로 처리하여 앱의 응답성을 개선한 점이 눈여겨볼만 하다.

코드를 크게 바꾸지 않고도 성능 개선을 느낄 수 있고 필요하면 점진적으로 적용할 수 있어 업데이트 부담도 적었다.

 

Automatic Batching

 

Batching은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어 한번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것이다.

한 함수 안에서 setState를 아무리 많이 호출시키더라도 리렌더링은 단 한번만 발생하고 여러번 리렌더링 하는것을 막아 성능이 향상된다.

// React 17에서는 각각 렌더링 됨
setTimeout(() => {
  setCount(count => count + 1);
  setFlag(flag => !flag);
}, 1000);

// React 18에서는 한 번에 렌더링됨

 

batch 처리하기 싫은 경우의 경우에는 ReactDOM.flushSync()를 사용하여 동기적으로 즉시 렌더링시킬 수 있다.

예를 들어, UI가 지금 당장 반영돼야 하는 중요 이벤트 처리나 애니메이션 프레임 맞출 때 등등 사용할 수 있다.

 

useTransition, startTransition

 

중요하지 않은 업데이트(예: 검색어 입력 시 필터링)를 부드럽게 처리할 수 있다.

특정 업데이트를 Transition으로 표시하여 사용자 상호 작용을 크게 개선했다.

상태 전환 중에 시각적 피드백을 제공하고 전환이 발생하는 동안 브라우저의 응답성을 유지하고,

어떠한 업데이트가 우선순위가 높은지 알려줄 수 있다.

 

예를 들어, 검색창과 결과창 두 부분으로 나눠 유저가 타이핑하는 것에 따라 즉각 반영되기를 기대하는 검색창과

검색창보다는 UI 업데이트가 느린 것에 자연스럽게 받아들여질 수 있는 결과창으로 나누면

검색창은 Urgent Update, 결과창은 Transition Update로 나눌 수 있다.

const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  startTransition(() => {
    setInputValue(e.target.value);
  });
};

 

위 코드에서 isPending을 이용해 로딩 스피너를 띄우거나 하면 편하게 UI를 구현할 수 있다.

 

Suspense

 

React 16.6 때 나온 초기 버전은 코드스플리팅 (lazy-loading)을 위해 사용했었는데,

이때 Suspense는 컴포넌트 단위에서만 쓸 수 있었고 데이터 페칭에는 쓰지 못했다.

const Profile = React.lazy(() => import('./Profile'));

<Suspense fallback={<div>Loading...</div>}>
  <Profile />
</Suspense>

 

React 18에서 확장된 Suspense는 데이터 페칭도 다룰 수 있게 됐고 서버 사이드 렌더링에서도 지원하며

React Query, SWR 등의 라이브러리에서도 Suspense를 지원하기 시작했다.

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

 

UserProfile 컴포넌트 내부에서 데이터를 비동기로 불러오고 있다면 데이터가 준비될 때까지 fallback UI를 보여준다.

 

useId

 

SSR(서버 사이드 렌더링)에서도 고유 ID를 안정적으로 생성할 수 있고 접근성(ARIA) 작업할 때 필수다.

const id = useId();

return <input id={id} />;

 

useDefferedValue

 

값 자체를 지연시켜 부드러운 렌더링을 유도할 수 있다.

const deferredValue = useDeferredValue(value);

 

복잡한 리스트를 필터링할 때 깜빡임이나 멈춤 현상을 줄이거나하여 단순하지만 꽤 큰 체감 개선이 가능하다.

 

기타 변경사항

 

ReactDOM.render는 Deprecated되어 ReactDOM.createRoot를 사용해야 한다.

 

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