천소희

기록하는 개발자

업데이트:

카테고리:

/

태그:

Automatic batching

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

한 함수에 setState를 많이 호출해도 리랜더링은 한번만!!

성능상 좋은 영향을 준다.

하지만 상태 변경직후 DOM에서 읽어야 하는 경우도 있기 때문에 이 때는 ReactDOM.flushSync() 를 사용하여 바로 리랜더링을 할 수 있게 한다.

  1. 더 적은 리랜더링
  2. 이벤트 핸들러 밖에서도 작용
  3. 예외처리도 가능!

Suspense on the server

리액트의 서버 사이드 랜더링 스텝

  1. 서버에서 전체앱에 대한 정보를 가져온다.
  2. 서버에서 전체 앱을 HTML로 랜더링하고 응답
  3. 클라이언트에서 JS 코드를 로드
  4. 클라이언트에서 JS 논리를 전체 앱에 대해 서버 생성 HTML에 연결

4단계가 진행되기전 이전단계가 다 완료되어야 한다.

컴포넌트마다 로딩 속도가 제각각이므로 오래걸리는 컴포넌트를 위해 기다려야 하기때문에 비효율적이다.

<Suspense/> 를 사용하면 앱을 더 작은 독립 단위로 나눌 수 있다. 특정 부분이 로딩이 느리다면 Suspense를 이용하여 해당 부분만 로딩되도록 유도한다.

Transition

업데이트 중에도 앱의 응답성을 유지하기 위해 도입

예시: 검색창에 검색을 시도할 때

⇒ 결과창은 검색창보다 늦게 업데이트 된다. 검색하는 것마다 결과를 업데이트하면 성능에 많은 문제가 생기기 때문에

transition에 랩핑된 부분은 업데이트가 보류된다.

import {useTransition} from 'react';

// transition 훅에서 Pending을 꺼내온다.
const [isPending, startTransition] = useTransition();

데이터 보류가 일어날 때 isPending 이 ture 로 처리되므로 해당하는 곳에 필요한 컴포넌트를 넣으면 된다.

참고