5. usehooks-ts

커스텀 훅 라이브러리

모든 Hook에 대한 코드가 [웹사이트](npm i usehooks-ts)에 있음

설치

npm i usehooks-ts

useBoolean()

• Boolean 타입처럼 작동하는 state를 만듦

• state에 setTrue, setFalse, toggle 등을 사용할 수 있음

useEffectOnce()

• 의존성 배열에 빈배열을 넣어 한번만 실행하는 Effect를 만듦

• 이름을 명확하게 해주는 효과

useFetch()

• 간단히 쓰기 좋은 fetch API 라이브러리

• use-http, SWR, react-query 등이 더 다양한 기능을 제공

• 자동으로 실시간 데이터를 업데이트하기 위해서는 SWR을 사용

• react query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용

useInterval()

• setInterval을 쓸 때는 effet나 ref로 문제를 해결해야하는데 이부분을 알아서 처리해줌

useEventListener()

• addEventListener

• dispatchEvent로 전달되는 커스텀 이벤트에 반응하기 좋음

useLocalStorage()

• state를 브라우저 로컬스토리지에 저장

• 다크테마에 유용

useDarkMode()

• 브라우저의 다크모드 여부를 알 수 있음