usehooks-ts

학습 키워드

• usehooks-ts

  • useBoolean

  • useEffectOnce

  • useFetch

  • useInterval

  • useEventListener

  • useLocalStorage

  • useDarkMode

• swr

• react-query

usehooks-ts

• usehooks-ts

npm i usehooks-ts

useBoolean

참/거짓을 다룰 땐 toggle 같이 의도가 명확한 함수를 쓰는 게 좋다.

→ 위에서 만든 TimerControl에 써보자.

useEffectOnce

의존성 배열을 빈 배열로 넣어서 한 번만 실행하는 Effect를 잡아줄 때가 많은데, 이걸 쓰면 더 명확히 드러난다.

→ 위에서 만든 useFetchProducts에 써보자.

useFetch

정말 간단히 쓸 때 좋음.

몇 가지 기능이 살짝 더 있는 useFetch 라이브러리가 따로 있다.

• use-http

조금 더 복잡해도 괜찮다면, 캐시 이슈를 고려한 좋은 대안이 있다.

• SWR

• TanStack Query

useInterval

React에서 setInterval 등을 쓸 때는 주의해야 할 부분이 있어서 Custom Hook을 만들어서 해결해야 함.

• useEffect 관점

  • React에서의 타이머 part 1 : setInterval 말고 이것! - 코드종님 영상

• Ref 활용

useEventListener

모든 종류의 이벤트를 확인할 수 있음. 특히 dispatchEvent로 전달되는 커스텀 이벤트에 반응하기 좋다. (강력 추천!)

useLocalStorage

localStorage와 JSON으로 객체 영속화.

이벤트를 통해(dispatchEvent + useEventListener) 다른 컴포넌트와 동기화하는 게 매우 중요한 특징.

useDarkMode