useTransition, useDefferedValue 발표자료

usetransition이란?

 

리액트 자바스크립트 라이브러리에서 사용하는 훅 중 하나로, UI를 차단하지 않고 상태를 업데이트 할 수 있으며 사용자가 느끼는 반응성을 개선하기 위해 사용된다.

특정 작업이 오래 걸릴 때 사용자에게 더 부드럽게 보이도록 하는데 도움을 준다.

 

const[isPending, startTransition] = useTransition();

 

useTransition은 두개의 항목이 있는 배열을 반환한다.

1.isPending : 플래그는 대기중인 transition이 있는지 알려준다.

2.startTransition : 함수는 상태 업데이트(setState) 를 transition으로 표시해주는 함수이다.

 

useTransition는 어떤 경우에 사용할까?

 

성능이 좋지 않게 되면 빠른 업데이트가 일어나지 않아 불편함을 느낄 수 있다.

 

useTransition()을 사용하지 않으면 특히 느린 장치에서 앱이 응답하지 않을 수 있는데 이건 동기적으로 모두 렌더링 한 이후에 반응하기 때문이다.

 

요약>> 모든 상태가 렌더링이 동기적으로 일어나면 성능이 좋지 않은 상황에서는 모든 상태가 늦게 반응하게 된다.

useTransition()을 통해 우선순위를 정해줄 수 있다.

 

---

 

useDeferredValue란?

 

상태 값 변화에 낮은 우선순위를 지정하기 위한 훅

useTransition은 함수 실행의 우선순위를 지정하는 반면, useDeferredValue는 값의 업데이트 우선순위를 지정한다.

우선순위가 높은 작업을 실행하는 동안 useMemo와 유사하게 이전 값을 계속 들고 있으면서 업데이트를 지연시킨다.

 

보통 useState() 훅과 함께 사용한다. 

useState()로 생성된 state 값을 인자로 사용하여 상태 업데이트의 처리 우선순위를 낮추고 다른 작업을 동시적으로 처리하도록 허용한다. deferred value라는 뜻 그대로, 값 변경이 일어날 때 다른 작업을 우선 처리하도록 해서 지연된 결과 값을 사용하게 되는 것이다.

 

useMemo()와 같이 사용할 때 좋은 시너지를 보여준다. 예를 들어 input의 value값이 바뀔 때마다 키워드를 검색하여 List를 새로 만들어 주는 로직이 있을 때, List의 불필요한 리랜더링을 막기 위해 보통 useMemo()로 래핑하여 사용한다.