내가 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의 히스토리 관리 기능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 쓸 때는 뜨어...
끗.
