리액트 (React)/리액트 기술 (React Tech)(2)
-
Hook - useDeferredValue, memo
useDeferredValue state 또는 props 변경을 미룹니다.다만 리렌더링을 방지하려면, memo와 함께 쓰는 것이 좋습니다. 역할은 useTransition 훅과 비슷합니다.다만 useTransition은 state에 대한 변경 동작에 적용하는 것이고useDeferredValue는 변경된 값에 적용하기 때문에, 순수 state를 쓰든 deferred value를 쓰든 자유입니다. 하지만 리렌더링을 방지하기 위해서는 memo와 함께 사용하는 것이 좋습니다.useDeferredValue만 쓰면 부모 컴포넌트와 리렌더링을 함께 하기 때문입니다. Lag in Search 간단하게 과일 이름을 검색하는 예제를 만들어보겠습니다.(과일 이름 출처는 wikipedia - List of culina..
2024.06.22 -
Hook - useTransition
useTransition useTransition은 UI를 블락킹(blocking)하지 않고 state를 업데이트하는 훅입니다.쉽게 말해, set으로 state를 업데이트하고이에 수반하여 리렌더링 할 때 UI가 멈추는 것을 방지합니다. 까지가 공식 문서의 설명이었는데,사실 설명대로 훅을 잘 쓰려면 리액트가 어떤 환경에서 동작하는 지를 잘 이해해야 하고어떤 상황에서 써야되는 지 잘 알아야 합니다. startTransition 사실상 useTransition의 기능은 startTransition 함수와 비슷합니다.그리고 startTransition 함수는 탑 레벨(top-level) 함수로써 굳이 훅을 쓰지 않고도 사용할 수 있습니다.startTransition is very similar t..
2024.06.18