React 18 ) useTransition

아까 useActionState에 대해서 언급하였는데, 작동이 안되는 경우가 종종 있다. 

예를 들어서, isPending 값이 제대로 업데이트 안되는 경우가 존재했다. 

( 아무래도 아직 나온지 얼마 안되어서 그런건가? ) 

 

* 두가지 반환값이 존재한다. 

- isPending : 배열을 반환하는데, 첫번 째 값은 업데이트가 진행중인지 나타내는 boolean 값 

- startTransition : 비우선 업데이트를 시작하는 함수 

 

* 사용목적

예를 들어서, 사용자가 입력하는 동안 목록 필터링처럼 시간이 좀 걸리는 작업이 있다면 이 작업을 startTransiton 안에 넣어서 실행할 수 있다. 그러면 입력반응은 즉시 이뤄지고, 시간이 걸리는 작업은 백그라운드에서 진행되면서 UI가 멈추지 않는다. 

 

import { useState, useTransition } from 'react';

function MyComponent() {
  const [value, setValue] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const newValue = e.target.value;
    // 시간이 걸릴 수 있는 업데이트를 startTransition 안에 넣어요.
    startTransition(() => {
      setValue(newValue);
      // 여기서 리스트 필터링 같은 작업을 할 수도 있어요.
    });
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
      {isPending && <p>업데이트 중...</p>}
      <p>입력값: {value}</p>
    </div>
  );
}

 

 

** 근데 왜 비우선 업데이트라는 표현을 쓰는걸까?

- 이 업데이트들이 바로 즉각적으로 처리되어야 하는 작업은 아니라는 것이다. 

- 사용자가 버튼을 클릭하거나 입력할 때처럼 바로 반응해야하는 작업들은 '우선 업데이트'로 처리되고, 화면의 반응성을 유지하기 위해서 즉각적인 업데이트가 필요하다.

- 반면에 useTransiton 내부에 있는 업데이트들은 UI 전체를 다시 렌더링하거나, 복잡한 계산 ( 리스트 필터링을 예시로 들 수 있음 ) 처럼 좀 걸리는 작업들을 포함할 수 있다. 이 작업들은 바로 처리되지 않아도 되고, 사용자의 즉각적인 상호작용에 방해가 되지 않도록 뒤로 미루어도 괜찮다. 그래서 리액트는 이런 업데이트들을 낮은 우선순위로 분류해서 '비우선 업데이트'라고 부르고, 더 긴급한 작업들이 먼저 처리되도록 하는 것이다.