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

Composite·2022년 8월 17일
4

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

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

react-use

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

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

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

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

react-hookz

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

아직까지 위에 비해선 지원하는 영역이 적긴 하지만, 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 쓸 때는 뜨어...

끗.

profile
지옥에서 온 개발자

0개의 댓글