3/1
useDefferedValue
- defer: 미루다
- ab입력시 input 리렌더링은 a, ab 두번 됨. 그 사이 defferedValue는 a로 남아있음
- a로 검색한 결과는 로딩될동안 suspended되어 loading -> a결과 로 보임
- 이제 input, defferedValue 둘다 ab로 리렌더링됨.
- ab로 검색한 결과는 로딩될동안 suspended되지만 loading 폴백이 아닌 기존 a결과로 보이다가 ab결과로 바꿔 보여줌
- 더 빠르게 업데이트되는(e.g. input)걸 먼저 렌더링하고 느린거(e.g. fetched data)를 그 담에 렌더
토스 레포에서 용례가 없네, 와이?
useImperativeHandle
- 자식 DOM을 상위에 ref로 다 내주고 싶지 않고, focus 라는 특정 attribute만 주고싶음
- 허용 안한 attribute들은 핸들링 불가.
- 사용하는 입장에선 그냥 ref쓰듯 하면 됨
- DOM attribute뿐만 아니고 함수 새로 만들어서(e.g. scrollAndFocusAddComment) 사용하게 할 수도 있음.
- e.g. 부모에서 버튼을 누르면 자식리스트를 최하단으로 스크롤하고 거기 있는 인풋에 포커스시킨다
- e.g. 부모에서 자식에 정의한 react query refetch시킬때도 사용 가능할듯
useSyncExternalStore
- 외부 store구독시 씀
- e.g. 리덕스, window.online, window.scrollY (리렌더링도 훨씬 적게 할 수 있음)
- e.g. 너무 많은 값을 return하는 외부 라이브러리 훅. 필요한것만 뽑아서 구독하면 리렌더링 줄일 수 있음.
- 리렌더링 줄일 수 있는 이유
- concurrent mode에서 돌아가기 때문. 그래서 useState+useEffect 쓰는것보다 적음.
- 외부꺼subscription하면서 리액트에 의도치 않은 inconsistent한 UI 노출되는거 방지할때 좋음.
- 서버렌더링할때도 안 거치적거려서 좋음
- https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api#link3
유용해보임… 토스 레포에선 아직 용례가 없군.
템플릿 리터럴 타입
type MediaQuery = `(${string}:${string})`;좋구먼