[React] useTransiton 이란?

1. 정의

• 리액트 18 버전 이후 추가된 기능으로 공식문서에는 useTransiton를 UI를 차단하지 않고
  state를 업데이트 할 수 있는 React Hook이라고 설명한다. 
  
  
• 예를 들면 극단적으로 무거운 작업을 할 때 다음 입력을 받지 못할 정도의 프레임 저하가 발생하게되면
  유저와 상호작용이 불가하고 좋은경험을 제공할 수 없게된다. 
• 이런 문제를 해결하기 위해 작업 (state 변화)에 우선순위를 나누고, 우선순위가 높은 이벤트가 발생 시
  그 이벤트를 우선처리하고 이후에 우선순위가 낮은 이벤트를 핸들링하여
  앞서말한 문제를 해결하는 기능이다.
  
  
• 즉, state 변화에 우선순위를 부여하는 React Hook이다.
  (상태변화를 일으키는 함수의 우선순위를 낮추는 hook)
  
  
• useTransition은 [isPending, startTransition] 값을 반환한다.
  isPending : 상태(state) 업데이트가 지연(Transition)되고 있음을 알려주는 값 ( boolean 타입 ) 
  startTransition : 상태(state) 업데이트를 지연(Transition)시켜주는 함수이다
  

2. 사용 

// 1. useTransition import
import { useState ,useTransition} from 'react';



function App () {

  //2.useTransition 선언
  const [isPending,startTransition] = useTransition();
  let size_data = ["200px","200px","blue"];
  let [value, setValue] = useState('확인용 예제');
  let [on,setOff] = useState(true);
  
  //3.useTransition 동작
  function test () {
    startTransition(()=>{
      setOff(false);
    });
    setValue('변경됐습니다.')
  }
  console.log(on ,isPending);
  console.log(value);
  return (
    <div>
      {
        on == false ? <Square size_data={size_data} /> : null
      }
	  //버튼 클릭 시 확인 
      <button onClick={()=>{
        test();
      }}> 테스트 버튼 </button>
      <div>{value}</div>
    </div>
  );
};

function Square (props){
  const style = {
    width: props.size_data[0] ,
    height: props.size_data[1],
    backgroundColor: props.size_data[2]
  };
  return <div style={style}> 나는야 사각형 </div>
}

export default App;

• 위 예제 코드를 보면 버튼을 클릭해 test 함수가 동작하면  value값과 on 값의 상태 변화가 발생한다.
• setOff의 경우 startTransition 함수로 래핑되어 상태변화의 우선순위가 낮아져 다른 상태변화 인
  setValue가 전부 일어난 후 setOff가 동작하여 사각형이 보이게 된다.

 

3. 기타

• useTransition()을 사용하면 다른 코드를 먼저 전부 실행한 후 동작하게 만들 수 있다.
• 요약하면 함수의 우선순위를 낮추는 React Hook이라 말할 수 있다.