<div>
<div><code>import { useState, useCallback } from 'react';</code></div>
<br>
<div><code>export default (initialValue = null) =&gt; {</code></div>
<div><code>const [value, setValue] = useState(initialValue);</code></div>
<div><code>const handler = useCallback((e) =&gt; {</code></div>
<div><code>setValue(e.target.value);</code></div>
<div><code>}, []);</code></div>
<div><code>return [value, handler];</code></div>
<div><code>};</code></div>
</div>
<div>이렇게 커스컴 훅을 만들 때, 다른 컴포넌트에서 구조분해 할당으로 [value, handler]를 받아오지 않습니까?</div>
<div>&nbsp;</div>
<div>근데 value 값이 바뀔 때 해당 커스텀 훅을 사용한 component가 어떻게 알고 리렌더링을 해주나요?</div>
<div>&nbsp;</div>
<div>리액트가 자체적으로 useState를 사용하여 값을 저장하는 state들의 목록을 갖고 알아서 감지를 하는 것인가요?</div>

<p>컴포넌트 단위에서 훅의 목록을 갖고있다고 생각하시면 됩니다.</p>

인프런 커뮤니티 질문&답변

커스텀 훅 질문