Say Goodbye to Debouncing: Use "useDeferredValue" Hook
Medium
오늘의 오전 학습 - React의 useDeferredValue
검색 기능을 개발할 때 검색 타이핑에 따른 지연된 네트워크 요청을 위한 debounce 기능을 활용하는 경우가 많습니다. 이러한 기능을 React의 useDeferredValue 훅을 통해 구현할 수 있다는 포스팅을 읽게 되어 요약해보고자 합니다.
참고문헌
https://medium.com/@Evelyn.Taylor/say-goodbye-to-debouncing-use-usedeferredvalue-hook-56e1c28a3e49
요약
useDeferredValue?
목적은 덜 중요한 부분의 렌더링을 지연시켜 렌더링의 우선순위를 반영하고자 함입니다.
검색 input 의 입력을 예시로 생각해보면, 즉각적으로 화면 업데이트가 반영되어야 할 부분은 입력창입니다. ('a' -> 'ab')
입력결과에 따른 리스트는 캐시된 데이터가 아닌 이상 즉각적인 업데이트가 사실상 불가능합니다. (서버에 요청을 하는경우)
이때, 변경되는 입력 state 를 useDeferredValue 의 인자로 넣어, 새로운 반환 state 를 사용하게 되면, 입력창에 대한 즉각적인 업데이트와 더불어, 새로운 검색어('ab') 에 대한 리스트 데이터가 전달될때까지 이전 렌더링 결과('a')를 화면에 우선적으로 렌더링합니다.
특이사항 및 장점
매 요청마다 loading 화면이 아닌 이전 상태값을 화면에 렌더링 할 수 있어 경우에 따라서는 사용자의 경험에 유리할 수 있습니다.
우선적으로 이전 화면을 렌더링 하지만, 백그라운드에서는 새롭게 변경된 state 에 대한 렌더링을 진행하게 됩니다. 이러한 렌더링 과정에 간섭이 발생한다면(예를 들면 검색 상태값 'ab'에 대한 렌더링을 진행중인데, 그 중간에 'abc' 로 변경을 할 경우) 기존에 작업중이던 렌더과정을 중단하고, 새로운 상태값에 대한 렌더링을 진행하게 됩니다.
만일 렌더링 이후 effect 가 적용되는 상황이라면, 중단된 렌더링에서는 effect 가 실행되지 않습니다
이러한 특징점은 기존에 사용되던 debounce 의 기능과, 렌더링 최적화에 도움을 줄 수 있습니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 12월 8일 오전 12:59
댓글 0
함께 읽은 게시물
(홍보) 노코드 AI 자동화툴 n8n 강의 얼리버드 혜택 D-1
추
... 더 보기
독일 딜리버리히어로(DH)의 올해 1분기 실적발표 컨퍼런스콜에서 마리 앤 최고재무책임자(CFO)는 전세계 자사 브랜드 12곳 중 배민의 부진을 콕 찍어 투자자들에 고개를 숙였다. 올해 1분기 아시아 지역 GMV(거래액)이 전년 대비 12% 이상 감소했다는 '어닝 쇼크'를 언급하면서다. 특히 한국을 제외한 전세계 GMV가 22% 급성장한 점과도 대비됐다.
... 더 보기기업에서 리더의 위치에 올랐다고 해서 모두 훌륭한 리더가 되는 것은 아니다. 기업을 이끄는 리더의 위치에 있는 사람치고 더 나은 실적을 목표로 하지 않는 경우는 없지만 말처럼 쉽지 않다. 더 나은 실적은 리더 혼자의 힘으로 이뤄지는 것이 아니기 때문이다.
... 더 보기파이낸셜타임스(FT)는 2일(현지시간) 소식통들을 인용해 xAI가 현재 3억달러 주식 매각을 추진하고 있다면서 성공하면 기업가치가 1130억달러에 이르게 된다고 보도했다.
... 더 보기
