리액트 - useTransition() 후순위처리, UX향상

    useTransition(): 렌더링을 나중에 하도록 할 수 있습니다.

원래는 input에 타이핑을 하면, <div>에 다 넣고 렌더링을 합니다.
그런데 startTransition 함수의 콜백함수에 넣은 state 변경함수는 나중에 처리가 됩니다.

let [inputValue, setInputValue] = useState("");

let [isPending, startTransition] = useTransition();

 

<input

    onChange={(e) => {

        startTransition(() => {

            setInputValue(e.target.value);

        });

    }}

/>

 

input에 타이핑이 되고 나서 <div>안의 내용을 처리하기 시작합니다.
=> 실행시점을 후순위로 바꿔 UX를 상향하도록 합니다.

 

isPending은 startTransition 안의 코드가 실행중일 때 true를 반환합니다.
=> 한마디로. 로딩중이면 true

{isPending ? "로딩중" : "빙글빙글 돌아가는 로딩 표시"}

이렇게 로딩 중이라는 표시를 남겨주기 유용합니다.

---

    useDeferredValue(늦게실행할state): useTransition과 거의 같은 기능

인자로 주어진 변수나 스테이트를 후순위로 처리하도록 합니다.
const 후순위처리할state = useDeferredValue(state)