DEV Community 👩‍💻👨‍💻

Ukjin Yang
Ukjin Yang

Posted on

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

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

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

react-use

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

GitHub logo streamich / react-use

React Hooks — 👍



👍
react-use





npm package CircleCI master npm downloads demos
Collection of essential React Hooks Port of libreact
Translations: 🇨🇳 汉语




npm i react-use





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

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

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

react-hookz

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

GitHub logo react-hookz / web

React hooks done right, for browser and SSR.

@react-hookz/web

NPM Version NPM Downloads NPM Dependents Build Coverage Types Tree Shaking

× 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
Enter fullscreen mode Exit fullscreen mode

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 does not do so either. You'll have to transpile your node-modules in order to run in IE.

Usage

This package provides three levels of compilation:

  1. Main, the /cjs folder — CommonJS modules, with ES5 lang level.
  2. ESM, the /esm folder — it is ES modules (browser compatible), with ES5 lang level.
  3. ESNext, the /esnext folder — it is ES modules (browser compatible), with ESNext lang level.

So, if you need the useMountEffect hook, depending on your…

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

그래서 이게 뭔데?

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

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

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

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

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

끗.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.