React의 맥가이버, react-use, react-hookz!

내가 Vue 와 Svelte 의 유용한 라이브러리를 소개했고,
얼마 뒤 보니까 많이들 쓰고 있더라.

• Vue 프로젝트의 단짝, VueUse
• Svelte의 안내데스크, svelte-add

자, 이번엔 리액트다. 좀 늦은 감이 있었지만.

react-use

전에 react-use 를 잠깐 소개했었는데, React 18 나온 뒤로 계속 지켜보았으나 이녀석 개발자가 더 이상 응답이 없어 사실상 활동 중단이 된 상황.
그래서 React 18 미지원으로 이 라이브러리 사용자들은 답답할 수밖에.

streamich / react-use

React Hooks — 👍

👍
react-use

^{Collection of essential React Hooks Port of libreact
Translations: 🇨🇳 汉语}

npm i react-use

• Sensors
  • useBattery — tracks device battery state.
  • useGeolocation — tracks geo location state of user's device.
  • useHover and useHoverDirty — tracks mouse hover state of some element.
  • useHash — tracks location hash value.
  • useIdle — tracks whether user is being inactive.
  • useIntersection — tracks an HTML element's intersection.
  • useKey, useKeyPress, useKeyboardJs, and useKeyPressEvent — track keys.
  • useLocation and useSearchParam — tracks page navigation bar location state.
  • useLongPress — tracks long press gesture of some element.
  • useMedia — tracks state of a CSS media query.
  • useMediaDevices — tracks state of connected hardware devices.
  • useMotion — tracks state of device's motion sensor.
  • useMouse and useMouseHovered — tracks state of mouse position.
  • useMouseWheel — tracks deltaY of scrolled mouse wheel.
  • useNetworkState — tracks the state of browser's network connection.
  • useOrientation — tracks…

View on GitHub

...라고 한숨쉬다가 다시 들어가봤는데,

어? 2022년 5월에 React 18 지원하네?
어?? 끝이네...

안타깝게도 많이 쌓인 이슈와 Pull request 들을 뒤로한 채 다시 활동 중단.
뭐... 그래도 React 18 지원하도록 수정해서 다행이다.

react-hookz

그래서 위 프로젝트 잠수에 지친 개발자들이 모여 대체 라이브러리를 만들었다.

react-hookz / web

React hooks done right, for browser and SSR.

× DOCS × DISCORD × CHANGELOG ×

---

@react-hookz/web is a library of general-purpose React hooks built with care and SSR compatibility in mind.

Install

This one is pretty simple, everyone knows what to do:

npm i @react-hookz/web
# or
yarn add @react-hookz/web

As hooks was introduced to the world in React 16.8, @react-hookz/web requires - you guessed it - react and react-dom 16.8+ Also, as React does not support IE, @react-hookz/web don't either.

Usage

This package distributed with ESNext language level and both, CJS and ES imports.
It means that depending on your browser target you might need to transpile it. Every major bundler provides a way to transpile node_modules fully or partially Address your bundler documentation for more details.

You can import hooks two ways:

// from the root of package
import { useMountEffect } from '@react-hookz/web';
// or single hook directly
import { useMountEffect } from '@react-hookz/web/esm/useMountEffect'

…

View on GitHub

아직까지 위에 비해선 지원하는 영역이 적긴 하지만, SSR 문제까지 해결하려는 노력이 돋보이는 라이브러리다.
지금 내가 쓰고 있는 라이브러리다.

그래서 이게 뭔데?

이제 이 둘의 소개를 시작하도록 하겠다.
이녀석들은 React Hooks 활용의 불편함을 해소시켜주는 라이브러리다.
이들의 대표적인 Hooks 가 있다면,

• 반응형 document.title
• 반응형 브라우저 스크롤
• useState 의 히스토리 관리 기능
• useState 의 Array 및 Object 버전
• 심지어 useState의 Set, Map 버전
• 수동 재렌더링 (개발자가 고의로 렌더링 API 호출)
• 디바운스 및 스로틀링이 첨가된 useState
• 컴포넌트 생명주기별 useEffect 확장
• HTML5 API 에서 제공하는 왠만한 기능들까지 반응형 추가
• 비동기 useState (근데 이런 건 다들 react-query 쓰잖아?)
• DOM 관련 useEffect

일단 내가 대표적으로 추스린 것들인데 이보다 일단 많다.
각 라이브러리 가서 확인해보면 알 거다.

자, Hooks 쓰면서 답답했던 Hooks API 들을 이제 이걸 통해 제공하니까 좋지 아니한가?
이제 말이 필요한가? 여기 리액트 Hooks 의 맥가이버 칼이 있다.
불편하게 useState 및 useEffect 개조하려고 머리 짜매지 말고,
그냥 npm install 해서 빨리 개발할 생각이나 해라.
너에게 주어진 시간이 많다면 할 말이 없지만.

근데 경험 상 함수 컴포넌트 만드는데 업무에 따라 500줄 넘어가는데, 클래스 컴포넌트였으면 오죽했을까 싶다. Vue도 마찬가지로 지금은 <script setup> 기능을 통해 간결한 컴포넌트 스크립트를 짤 수 있는데 컴포지션은 커녕 옵션 API 쓸 때는 뜨어...

끗.