startTransition과 서버 렌더링 suspense

camel·2023년 2월 11일

React v18 개발 공부 최적화

3줄 요약

1. startTransition

2. suspense 서버렌더링 사용법

3. startTransition 응용한 서버 렌더링

프로젝트를 진행하면서 자연스럽게 구동하지 않았던 몇몇 문장들이 있다.
그런 답답함을 해소하기 위해서 React v18 관련해서 찾아보던 중 답답함을 해소할만한 내용과
흥미로운 내용들이 있어서 적어본다.

https://yrnana.dev/post/2022-04-12-react-18/

1. startTransition


import { startTransition } from 'react';

// 긴급한 업데이트 : 입력하고 있는 값
setInputValue(input);

// startTransition으로 래핑된 업데이트는 긴급하지 않은 것으로 처리되고, 더 긴급한 업데이트가 들어오면 중단된다.
startTransition(() => {
  // 전환 업데이트: 입력값에 따른 쿼리값
  setSearchQuery(input);
});

위처럼 setInputValue 가 업데이트 되고 있을 때는 전환 업데이트가 실행이 되지 않는다.

전환이 중단되면 리액트는 그전 데이터들을 버리고 마지막 업데이트만을 렌더링해 실행한다.

위 방법을 활용하여 검색창(긴급 업데이트), 검색창의 autocomplete(전환 업데이트)을 최적화하여 사용할 수 있다.

예로 긴급한 업데이트를 검색창에다가 사용하고,
전환업데이트를 autocomplete 되는 state 값으로 활용하면 최적화가 될 수 있을 것이다.

2. 서버렌더링

<Suspense fallback={<PageGlimmer />}>
  <RightColumn>
    <ProfileHeader />
  </RightColumn>
  <LeftColumn>
    <Suspense fallback={<LeftColumnGlimmer />}>
      <Comments />
      <Photos />
    </Suspense>
  </LeftColumn>
</Suspense>

이번에 React 18로 업데이트 되면서 서버 렌더링이 추가 되었다고 한다.
그전까지는 코드스플리팅만 지원했지만 이제 서버 렌더링을 활용 할 수 있다.

<div>
  {showComments && (
    <Suspense fallback={<Spinner />}>
      <Panel>
        <Comments />
      </Panel>
    </Suspense>
  )}
</div>

위와 같이 조건부로 서버렌더링이 걸려 있을 때 fetch 값을 받아오는 상황이라면
fallback값이 DOM에 넣는다.
패치가 완료되면 fallback값 제거와 함께 안에 내용들을 보여준다.

3.StartTransition과 서버렌더링 응용

function handleClick() {
  startTransition(() => {
    setTab('comments');
  });
}

// 최초에 <Photos />를 보여줄때는 Spinner를 보여주지만,
// handleClick으로 탭을 변경하면 렌더링이 지연되면서 계속 <Photos />를 보여주다가
// 데이터 로딩이 완료되면 <Comments />로 전환될 것이다.
<Suspense fallback={<Spinner />}>
  {tab === 'photos' ? <Photos /> : <Comments />}
</Suspense>;