[react] React Transition (useTransition)

📍 useTransition Hook

• 이 훅을 사용하면 대규모 업데이트 중에도 리액트 앱의 반응성을 유지하는 데 도움이 됨.
• 이런 경우에 사용
  1. UI를 정지시킬 수 있는 느린 작업
  2. 당장 중요하지 않은 업데이트
  3. 표시되는데 시간이 걸리는 검색 결과
• /** 랜더링이 늦어지면 Loading... 이 뜨게 됨. 
  text는 즉시 랜더링 되지만, 지연이 발생하게 되면 isPending 의 값이 계속해서 true 이기 때문에
  <p>Loading...</p> 의 랜더링은 병합되거나 생략될 수 있음.  
   계속 ture라서 변동하지를 않을 테니까~ ) */
• --> 랜더링 횟수가 줄어들게 됨!! 

import { useState, useTransition } from "react";
import {createRoot} from "react-dom/client";

function SearchBar() {
    const [text, setText] = useState("");
    const [results, setResults] = useState("");
    const [isPending, startTransition] = useTransition();

    const handleChange = (e) => {
        // Urgent
        setText(e.target.value); // 모든 처리가 됨.

        // non-urgent
        startTransition( () => { /** 처리는 즉시 될 수 있는데, 랜더링은 늦어질 수 있음. */
            setResults(e.target.value);
        });
    }

    return (
        <div>
            <input value={text} onChange={handleChange} />
            {isPending ? (<p>Loading...</p>) : (<p>Search Result for : {results}</p>)}
            { /** 랜더링이 늦어지면 Loading... 이 뜨게 됨. 
             * text는 즉시 랜더링 되지만, 지연이 발생하게 되면 isPending 의 값이 계속해서 true 이기 때문에
             * <p>Loading...</p> 의 랜더링은 생략될 수 있음.  
             * (게속 ture라서 변동하지를 않을 테니까~ ) */ }
        </div>
    );
}


createRoot(document.getElementById('react4')).render(
    <SearchBar />
);

 

📍 ?

• ㅇㅇ 

 

 

📍 ?

• ㅇㅇ 

 

 

 

 

📍 ?

• ㅇㅇ 

 

---

출처 : 

 

 

 

---

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.