[Hook] useDeferredValue (리렌더링 속도가 느릴때.)

◼ useDeferredValue  

useDeferredValue는 React Hook으로, UI 일부를 지연시킬 수 있게 해줍니다. 예를 들어, 사용자가 입력한 내용에 따라 화면의 일부를 변경하는 경우, 입력이 바뀔 때마다 전체 UI를 다시 렌더링하는 것은 비효율적일 수 있습니다.

 

이 때 useDeferredValue를 사용하면 입력 값의 변경을 느리게 반영하여 사용자 경험을 향상시킬 수 있습니다.
간단히 말해, useDeferredValue는 입력이 바뀔 때마다 바로바로 UI를 갱신하는 것이 아니라, 입력이 변경되었음을 알리고 일부 업데이트를 지연시킵니다. 이로써 사용자가 입력하는 동안 UI가 끊김 없이 부드럽게 유지될 수 있습니다.

 

예를 들어, 사용자가 검색어를 입력하면 해당 검색어에 따라 결과를 보여주는데, 검색어를 입력할 때마다 결과를 즉시 갱신하는 것이 아니라 입력이 멈춘 후에 갱신하고 싶을 때 useDeferredValue를 사용할 수 있습니다. 이렇게 하면 사용자가 입력하는 동안 부담 없이 UI를 유지할 수 있습니다.

 

 

 

 

◼ 중간의 값을 막 변경한다면? 

useDeferredValue로 지연된 값이 백그라운드에서 업데이트되는 도중에, 해당 값이 중간에 변경되어 새로운 값으로 업데이트될 때를 의미합니다. 이 경우 React는 백그라운드에서 진행 중이던 업데이트를 중단하고, 새로운 값으로 업데이트하는 작업을 시작합니다.

 

예를 들어, 사용자가 입력 필드에 문자를 입력할 때마다 해당 값을 useDeferredValue에 전달하여 UI를 업데이트하고 있다고 가정해보겠습니다. 사용자가 "abc"를 입력하면, 이 값이 useDeferredValue에 전달되어 UI 업데이트가 시작됩니다. 그러나 "abc"를 입력하는 도중에 사용자가 "a"를 지우고 "xyz"로 대체한다면, React는 "abc"에 대한 업데이트를 중단하고 "xyz"에 대한 새로운 업데이트를 시작합니다.

이렇게 함으로써 React는 항상 사용자의 최신 입력을 반영하며, 중간에 끊어진 업데이트는 무시됩니다. 이는 사용자가 빠르게 입력하는 동안 UI가 끊김 없이 부드럽게 유지될 수 있도록 도와줍니다.

 

 

 

 

 

◼ 사용하면 유용한 

useDeferredValue를 성능 최적화로 적용할수 있습니다. memo와 사용을 권장합니다

UI일부가 리렌더링 속도가 느리고, 이를 최적화를 할수가 없을때, 최소한의 끈김없이 느리지만 UI를와 값을 보여줄때 유용하게 사용합니다.

• 사용자 입력 처리: 사용자의 입력에 반응하여 UI를 업데이트할 때, 입력이 변경될 때마다 즉시 UI를 갱신하는 것이 아니라 입력이 멈춘 후에 UI를 업데이트하고 싶을 때 사용합니다. 예를 들어, 검색 기능에서 사용자가 검색어를 입력할 때마다 검색 결과를 즉시 갱신하는 것이 아니라 입력이 멈춘 후에 검색 결과를 업데이트하고 싶을 때 유용합니다.
• 성능 최적화: 대규모 데이터나 복잡한 UI를 다룰 때, 전체 UI를 다시 렌더링하는 것이 비효율적일 수 있습니다. 이런 경우 useDeferredValue를 사용하여 UI의 일부 업데이트를 지연시키면 전체적인 성능을 향상시킬 수 있습니다.
• 네트워크 요청 지연: 네트워크 요청을 통해 데이터를 가져오는 경우, 매번 입력이 변경될 때마다 새로운 요청을 보내는 것이 아니라 입력이 일정 시간동안 변경되지 않았을 때에만 요청을 보내고 싶을 때 사용합니다.
• 사용자 경험 향상: 사용자가 입력하는 동안 UI를 부드럽게 유지하고 싶을 때 useDeferredValue를 사용하여 UI 업데이트를 조절할 수 있습니다. 이를 통해 사용자가 입력하는 동안 끊김 없는 사용자 경험을 제공할 수 있습니다.

 

 

 

 

 

◼ 주의사항 

• 새 객체 생성 주의: useDeferredValue에 전달하는 값은 문자열이나 숫자와 같은 단순한 값이거나, 컴포넌트 바깥에서 만들어진 객체여야 합니다. 중요한 점은 렌더링 중에 새로운 객체를 계속 만들어서 전달하면, 불필요한 백그라운드 업데이트가 발생할 수 있다는 것입니다.
• 백그라운드 업데이트 제어: useDeferredValue로 전달된 값이 중간에 바뀌면, 백그라운드에서 새 값으로 업데이트를 예약합니다. 그러나 값이 중간에 바뀌면 백그라운드 업데이트가 중단될 수 있습니다.
• 네트워크 요청 지연: useDeferredValue는 UI 업데이트를 지연시키는 것이지만, 네트워크 요청을 자동으로 지연시키지 않습니다. 만약 네트워크 요청을 지연시키려면 별도의 작업이 필요합니다.
• 이벤트 우선순위: useDeferredValue로 인한 백그라운드 업데이트는 UI 이벤트보다 우선시됩니다. 그러니까 사용자 입력과 같은 이벤트가 있으면 백그라운드 업데이트가 일시 중단될 수 있습니다.
• <Suspense>와 통합: useDeferredValue는 <Suspense>와 함께 사용할 수 있지만, 새로운 값이 백그라운드에서 업데이트될 때 UI가 일시 중단되면 사용자는 대체 UI를 볼 수 없을 수도 있습니다. 사용자가 대체 UI를 보기 전까지는 이전 값이 보일 것입니다.

 

 

 

 

 

[참고]

https://ko.react.dev/reference/react/useDeferredValue