useTransition, uesDeferredValue

useTransition 훅을 사용해 UI 갱신을 지연시키는 방법
isPending 불린 값을 사용해 일관성 없는 상태와 UI에 대한 플래그를 남기는 방법
useDefferedValue 훅을 사용해 예전 값과 새로운 값을 동시에 사용하는 방법
SuspenseList 컴포넌트를 사용해 여러 폴백 UI를 관리하는 방법
동시성 렌더링이 제공하는 기능 이해하기

Ref

동시성 모드

동시성 모드를 사용하면 리액트가 동시에 여러 버전의 UI를 메모리에서 렌더링하고 현재 상태에 가장 적합한 버전만 DOM에 갱신한다.
현재 상태의 갱신이 완료될 때까지 시간이 걸려도 이전 버전의 UI를 DOM에 표시 가능
우선순위가 더 높은 갱신(사용자 인터렉션)이 이뤄지는 동안 리액트가 렌더링을 일시중단 가능
이런 유연성은 앱의 반응성을 유지하고 사용자가 인지하는 앱의 성능을 개선하는데 도움이 된다.

동시성 모드는 코드, 데이터, 자원을 더 의도적으로 명확히 목표를 정해 적재할수 있게 해주며 서버 측 렌더링과 클라이언트 측 컴포넌트의 수화를 더욱 원활하게 통합해서 컴포넌트가 사용자와 적시에 상호작용 할 수 있도록 자원을 주입할 수 있게 해줌

동시성 렌더링

리엑트가 한 번에 여러 버전의 UI에서 작동하게 하는데, 새 버전이 준비될 때까지 완전히 상호작용할 수 있는 이전 버전을 표시한다.

즉, 단기적으로 최신 상태가 브라우저의 현재 UI와 일치하지 않을 수도 있다는 뜻
동시성 모드를 사용하려면 앱이 초기에 브라우저에 렌더링되는 방식을 변경해야 한다.

// React 한정
const root = document.getElementById('root');
ReactDOM.createRoot(root).render(<App />);

목표는 앱의 사용자 경험을 향상하고 앱이 더 반응적으로 느껴지게 만들고, 갱신을 조율해 사용자가 무엇이 오래됐고 무엇이 갱신 중이며 무엇이 최신 내용인지 즉시 이해할 수 있게 하는것

useTransition, useDeferredValue 훅

컴포넌트가 새 데이터를 적재하거나 새 값을 계산하는 동안 리액트가 이전 UI나 이전 값을 계속 표시하도록 허용

후퇴 상태(receded state)를 방지하는데 도움이 되기 때문
- 리엑트가 유용하고 상호작용이 가능한 컴포넌트를 이전의 적재 중 상태로(실수로) 전환하는 경우 이를 비정상적인 상태라고 말함
- ex: 사용자 목록에서 새로운 사용자를 선택하면 사용자 상세 정보 패널을 스피너로 대체한다. 이는 이전으로 되돌아가는 느낌이 들기 때문에 약간 충격적, 이런 상태를 후퇴 상태라 부른다.
- 원치 않는 로딩을 표시 X

useTransition을 사용해 후퇴 상태 피하기

스피너로 다시 돌아가지 않고 이전 UI 정보를 계속 표시 "startTransition은 UI를 Blocking 않고 상태를 업데이트할 수 있게 해줍니다."

상태 변경으로 인해 하위 컴포넌트가 일시중단될 때 리엑트가 이전 UI를 표시할 수 있도록 useTransition 훅을 사용

const UserPage = () => {
  const [loggedInUser] = useUser();
  const [selectedUser, setSelectedUser] = useState(null);
  const user = selectedUser || loggedInUser;
  const queryClient = useQueryClient();
  const [startTransition] = useTransition(); // startTransition 함수 get
  
  const switchUser = (nextUser: User) => {
    startTransition(() => setSelectedUser(nextUser)); // 사용자 상태 변경을 전환으로 감쌈
    // queryClient.prefetchQuery('사용자 상세 정보 미리 읽어오기');
    // queryClient.prefetchQuery('사용자 이미지 미리 읽어오기');
  }
  
  return user 
    ? <Susepense fallback={<PageSpinner/>}>
        <UserDetails userID={user.id}/>
      </Suspense>
    : <PageSpinner />  
}

useTransition 훅은 하위 컴포넌트가 일시중단될 수 있는 상태 변경을 감쌀 때 사용하는 함수가 포함된 배열을 반환
새 데이터 적재에 오랜 시간이 걸린다면, 사용자가 이전 UI를 보면서 혼란에 빠질수 있다.
- 따라서 앱이 데이터를 적재하느라 바쁘다는 사실을 알려주기 위해 몇가지 피드백을 제공해야 한다.

const [startTransition] = useTransition();

상태 변경 시 스피너로 다시 돌아가지 않는 것은 새로운 상태 데이터에 적재에 시간이 오래 걸리지 않는 한 개선이라 할 수 있다. (즉, 스피너 찔끔 표시 같은 상황)

Transition은 이미 표시된 콘텐츠(예시: 탭 컨테이너)를 숨기지 않을 만큼만 “대기”합니다. 만약 Posts 탭에 중첩된 <Suspense> 경계가 있는 경우 Transition 은 이를 “대기”하지 않습니다.

isPending을 사용해 사용자에게 피드백 제공하기

useTransition 훅은 상태가 변경되는 동안 리액트가 이전 UI를 표시할수있게 해준다. 그러나, 일관되지 않은 UI가 지속되면 혼란을 유발할 수 있다. UI가 오래된 값을 계속 표시하더라도 변경이 발생하는 중임을 사용자에게 알리는 몇 가지 피드백을 제공하는 것이 좋다.

ex: 적재중인 패널의 불투명도를 줄여서 오래됐음을 보여주는 등..
- 스피너로 후퇴하지 않고 화면에 전환중임을 표시하는 방법 중 하나

const [isPending, startTransition] = useTransition()

이전 UI를 계속 보여주면서 isPending true가 설정되고 이전에 일시중단된 다음 업데이트 UI를 렌더링한다.

리엑트 문서에서는 코드 기반 전체에 useTransition 호출을 삽입하는 대신 useTransition 호출을 디자인 시스템에 통합하는 편이 더 낫다고 제안한다 (확인 필요)

ex: 버튼은 이벤트 핸들러를 전환으로 감싸기

// 버튼을 렌더링하면서 전환 코드도 캡슐화
// 버튼을 클릭하면 전환이 시작되고, 전환이 일시중단 상태인 동안 버튼에 스피너 표시

const ButtonPending = ({children, onClick, ...props}) => {
  const [isPending, startTransition] = useTransition();
  
  const handleClick = () => {
    startTransition(onClick); // 핸들러를 transition으로 감쌈
  }
  
  return (
    <button onClick={handleClick} {...props}>
      {isPending && <Spinner/>
      {children}
      {isPending && <Spinner/>
    </button>
  )
}

스피너가 노출되는 텀이 짧다면 CSS로 수백밀리초 후에 스피너가 서서히 나타나도록 설정해봐라

데이터가 빠르게 적재되는 경우 스피너를 보지 못할것이다.

useDeferredValue로 이전값 유지하기

UI 일부 업데이트를 지연(deferred)시킬 수 있는 훅

지연을 발생시켜 새 값을 UI로 렌더링할 수 있을 때까지 이전값을 사용
즉, 새 값은 지연된다.
리액트는 이전 버전(오래된 UI)과 새 버전(업데이트 이후 UI)의 값을 모두 유지하고 UI에서 두 버전을 모두 사용한다.

// deferrredValue는 undefined로 시작하므로 || user 끝에 추가해서
// 초기 user 값이 설정되자마자 바로 사용하도록 설정
const deferredUser = useDeferredValue(user) || user;
const isPending = deferredUser !== user;

const siwtchUser = (nextUser: User) => {
  setSelectedUser(nextUser)
  // queryClient.prefetchQuery('사용자 상세 정보 미리 읽어오기');
  // queryClient.prefetchQuery('사용자 이미지 미리 읽어오기');
}

return user 
    ? <main>
        <UserList 
          user={user} // 새 사용자 목록 반영
          setUser={switchUser} 
          // 목록 사용자가 details 사용자와 일치하지 않는다는 사실을 목록에게 알림
          isPending={ispending} 
         />
        <Susepense fallback={<PageSpinner/>}>
          <UserDetails 
          // 새 사용자의 상세 정보를 기다리는 동안 이전 사용자의 상세정보 표시
            userID={deferredUser.id} 
            isPending={isPending} // 사용자 정보가 오래된 정보라는 사실을 넘김
          />
        </Suspense>
     </main>
    : <PageSpinner />

추적할 값을 인자로 useDeferredValue를 호출
이 훅은 value를 추적해서 value가 이전 값에서 새 값으로 변경되면 훅은 두 값중 하나를 반환할 수 있다.
리액트가 새 값을 사용해 새 UI를 성공적으로 렌더링하고 자손 컴포넌트 중 렌더링이 일시중단되거나 지연된 자손이 없다면 훅이 새 값을 반환하고, 리액트는 UI를 갱신한다.
리액트가 새 값으로 렌더링을 마치기 위해 어떤 프로세스의 완료를 기다려야 하는 경우, 훅은 이전 값을 반환하고 리액트는 기존 값을 사용해 UI를 표시한다.(이와 동시에 메모리상에서 새 값을 사용해 UI 작업을 수행)

const deferredValue = useDeferredValue(value);

PreviousSuspense와 이미지 적재하기 NextSuspenseList

Last updated 17 days ago