useTransition, uesDeferredValue

• useTransition 훅을 사용해 UI 갱신을 지연시키는 방법

• isPending 불린 값을 사용해 일관성 없는 상태와 UI에 대한 플래그를 남기는 방법

• useDefferedValue 훅을 사용해 예전 값과 새로운 값을 동시에 사용하는 방법

• SuspenseList 컴포넌트를 사용해 여러 폴백 UI를 관리하는 방법

• 동시성 렌더링이 제공하는 기능 이해하기

Ref

• https://ko.react.dev/reference/react/startTransition

• https://ko.react.dev/reference/react/useTransition

• https://ko.react.dev/reference/react/useTransition#preventing-unwanted-loading-indicators

• https://ko.react.dev/reference/react/useDeferredValue

동시성 모드

• 동시성 모드를 사용하면 리액트가 동시에 여러 버전의 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);