<div id="readability-page-1" class="page"><article id="article-show-container" data-article-id="1139242" data-article-slug="reactyi-maeggaibeo-react-use-react-hookz-57hm" data-author-id="201866" data-author-name="Ukjin Yang" data-author-username="composite" data-co-author-ids="" data-path="/composite/reactyi-maeggaibeo-react-use-react-hookz-57hm" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true">
        <header id="main-title">

          <div>
                <p><a href="/composite"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i7tYDRmB--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/201866/5014b724-95d6-43af-8561-79a14911a196.png" width="40" height="40" alt="Ukjin Yang"></a>
                </p>
                
              </div>
        </header>

        <div data-article-id="1139242" id="article-body">
            <p>내가 Vue 와 Svelte 의 유용한 라이브러리를 소개했고,<br>
얼마 뒤 보니까 많이들 쓰고 있더라.</p>

<ul>
<li><a href="https://dev.to/composite/vue-vueuse-jal">Vue 프로젝트의 단짝, VueUse</a></li>
<li><a href="https://dev.to/composite/svelteyi-annaedeseukeu-svelte-add-52k7">Svelte의 안내데스크, svelte-add</a></li>
</ul>

<p>자, 이번엔 리액트다. 좀 늦은 감이 있었지만.</p>
<h2>
  <a name="reactuse" href="#reactuse">
  </a>
  react-use
</h2>

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





<p>...라고 한숨쉬다가 다시 들어가봤는데,</p>

<p>어? 2022년 5월에 React 18 지원하네?<br>
어?? 끝이네...</p>

<p>안타깝게도 많이 쌓인 이슈와 Pull request 들을 뒤로한 채 다시 활동 중단.<br>
뭐... 그래도 React 18 지원하도록 수정해서 다행이다.</p>
<h2>
  <a name="reacthookz" href="#reacthookz">
  </a>
  react-hookz
</h2>

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


<div id="readme" data-path="README.md"><article itemprop="text">
<hr>
<p dir="auto"><code>@react-hookz/web</code> is a library of general-purpose React hooks built with care and SSR compatibility
in mind.</p>
<h2 dir="auto">
Install</h2>
<p dir="auto">This one is pretty simple, everyone knows what to do:</p>
<div data-snippet-clipboard-copy-content="npm i @react-hookz/web
# or
yarn add @react-hookz/web">
<pre>npm i @react-hookz/web
<span><span>#</span> or</span>
yarn add @react-hookz/web</pre>
<div>
<p>
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</p>
</div>
</div>
<p dir="auto">As hooks was introduced to the world in React 16.8, <code>@react-hookz/web</code> requires - you guessed it -
<code>react</code> and <code>react-dom</code> 16.8+
Also, as React does not support IE, <code>@react-hookz/web</code> does not do so either. You'll have to
transpile your <code>node-modules</code> in order to run in IE.</p>
<h2 dir="auto">
Usage</h2>
<p dir="auto">This package provides three levels of compilation:</p>
<ol dir="auto">
<li>
<strong>Main</strong>, the <code>/cjs</code> folder — CommonJS modules, with ES5 lang level.</li>
<li>
<strong>ESM</strong>, the <code>/esm</code> folder — it is ES modules (browser compatible), with ES5 lang level.</li>
<li>
<strong>ESNext</strong>, the <code>/esnext</code> folder — it is ES modules (browser compatible), with ESNext lang level.</li>
</ol>
<p dir="auto">So, if you need the <code>useMountEffect</code> hook, depending on your…</p></article></div>


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

<h2>
  <a name="%EA%B7%B8%EB%9E%98%EC%84%9C-%EC%9D%B4%EA%B2%8C-%EB%AD%94%EB%8D%B0" href="#%EA%B7%B8%EB%9E%98%EC%84%9C-%EC%9D%B4%EA%B2%8C-%EB%AD%94%EB%8D%B0">
  </a>
  그래서 이게 뭔데?
</h2>

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

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

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

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

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

<p>끗.</p>


          </div>
          
  



      </article></div>

Ukjin Yang

내가 Vue 와 Svelte 의 유용한 라이브러리를 소개했고,
Vue 프로젝트의 단짝, VueUse
Svelte의 안내데스크, svelte-add
자, 이번엔 리액트다. 좀 늦은 감이 있었지만.
전에 react-use 를 잠깐 소개했었는데, React 18 나온 뒤로 계속 지켜보았으나 이녀석 개발자가 더 이상 응답이 없어 사실상 활동 중단이 된 상황.
 / 
        react-use
      
    
React Hooks
    Port of libreact
    
🇨🇳 汉语
  
  
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 들을 뒤로한 채 다시 활동 중단.
그래서 위 프로젝트 잠수에 지친 개발자들이 모여 대체 라이브러리를 만들었다.
 / 
        web
      
    

× DOCS × DISCORD ×
CHANGELOG ×
@react-hookz/web is a library of general-purpose React hooks built with care and SSR compatibility
in mind.
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 does not do so either. You'll have to
transpile your node-modules in order to run in IE.
This package provides three levels of compilation:
Main, the /cjs folder — CommonJS modules, with ES5 lang level.
ESM, the /esm folder — it is ES modules (browser compatible), with ES5 lang level.
ESNext, the /esnext folder — it is ES modules (browser compatible), with ESNext lang level.
So, if you need the useMountEffect hook, depending on your…
View on GitHub
아직까지 위에 비해선 지원하는 영역이 적긴 하지만, SSR 문제까지 해결하려는 노력이 돋보이는 라이브러리다.
이제 이 둘의 소개를 시작하도록 하겠다.
반응형 document.title
반응형 브라우저 스크롤
useState 의 히스토리 관리 기능
useState 의 Array 및 Object 버전
심지어 useState의 Set, Map 버전
수동 재렌더링 (개발자가 고의로 렌더링 API 호출)
디바운스 및 스로틀링이 첨가된 useState
컴포넌트 생명주기별 useEffect 확장
HTML5 API 에서 제공하는 왠만한 기능들까지 반응형 추가
비동기 useState (근데 이런 건 다들 react-query 쓰잖아?)
DOM 관련 useEffect
일단 내가 대표적으로 추스린 것들인데 이보다 일단 많다.
자, Hooks 쓰면서 답답했던 Hooks API 들을 이제 이걸 통해 제공하니까 좋지 아니한가?
useState 및 useEffect 개조하려고 머리 짜매지 말고,
npm install 해서 빨리 개발할 생각이나 해라.
근데 경험 상 함수 컴포넌트 만드는데 업무에 따라 500줄 넘어가는데, 클래스 컴포넌트였으면 오죽했을까 싶다. Vue도 마찬가지로 지금은 <script setup> 기능을 통해 간결한 컴포넌트 스크립트를 짤 수 있는데 컴포지션은 커녕 옵션 API 쓸 때는 뜨어...
끗.

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

댓글