<div id="readability-page-1" class="page"><div aria-label="Content">
 <article itemscope="" itemtype="http://schema.org/BlogPosting">

 

 <div itemprop="articleBody">
 

<a href="https://itnext.io/react-custom-hooks-basics-f92de2a0ac0e">React - Your First Custom Hook</a>

Hook을 단순히 기존 class component를 functional component로 전환하는 것을 넘어, UI와 로직을 분리시킬 수 있다.

<div><pre><code>function Form() {
 const [isValid, setValid] = useState(false);
 return (
 &lt;div className="Form"&gt;
 &lt;label htmlFor="password"&gt;Password: &lt;/label&gt;
 &lt;input
 id="password"
 onChange={e =&gt; {
 const newValue = e.target.value;
 let _isValid = false;
 if (newValue.length &gt;= 8) _isValid = true;
 setValid(_isValid);
 }}
 /&gt;
 {isValid ? &lt;p&gt;Your password is valid &lt;/p&gt; : null}
 &lt;/div&gt;
 );
}
</code></pre></div>

해당 UI에서 로직을 분리해보자.

<div><pre><code>function Form() {
 const [isValid, onPasswordChange] = useSmartPassword();
 return (
 &lt;div className="Form"&gt;
 &lt;label htmlFor="password"&gt;Password: &lt;/label&gt;
 &lt;input id="password" onChange={e =&gt; onPasswordChange(e)} /&gt;
 {isValid ? &lt;p&gt;Your password is valid &lt;/p&gt; : null}
 &lt;/div&gt;
 );
}

function useSmartPassword() {
 const [isValid, setValid] = useState(false);

 const onChange = e =&gt; {
 /**
 * Longer validation logic can go here
 */
 const newValue = e.target.value;
 let _isValid = false;
 if (newValue.length &gt;= 8) _isValid = true;
 setValid(_isValid);
 };
 return [isValid, onChange];
}
</code></pre></div>

사실 이 로직이 다소 이해가 가지 않는 이유는, 다른 언어에 굉장히 흔한 tuple이 Javascript에는 없기 때문이다.

일단 모든 Custom Hooks는 <code>currentValue</code>에 해당하는 값과, 해당 값을 업데이트하는 함수를 반환해야 한다.

 </div>
 
 
</article>

 </div></div>

immigration9

직접 작성해보는 Custom Hooks
React - Your First Custom Hook
Hook을 단순히 기존 class component를 functional component로 전환하는 것을 넘어, UI와 로직을 분리시킬 수 있다.
function Form() {
 const [isValid, setValid] = useState(false);
 return (
 <div className="Form">
 <label htmlFor="password">Password: </label>
 <input
 id="password"
 onChange={e => {
 const newValue = e.target.value;
 let _isValid = false;
 if (newValue.length >= 8) _isValid = true;
 setValid(_isValid);
 }}
 />
 {isValid ? Your password is valid : null}
 </div>
 );
}
해당 UI에서 로직을 분리해보자.
function Form() {
 const [isValid, onPasswordChange] = useSmartPassword();
 return (
 <div className="Form">
 <label htmlFor="password">Password: </label>
 <input id="password" onChange={e => onPasswordChange(e)} />
 {isValid ? Your password is valid : null}
 </div>
 );
}
function useSmartPassword() {
 const [isValid, setValid] = useState(false);
 const onChange = e => {
 /**
 * Longer validation logic can go here
 */
 const newValue = e.target.value;
 let _isValid = false;
 if (newValue.length >= 8) _isValid = true;
 setValid(_isValid);
 };
 return [isValid, onChange];
}
사실 이 로직이 다소 이해가 가지 않는 이유는, 다른 언어에 굉장히 흔한 tuple이 Javascript에는 없기 때문이다.
일단 모든 Custom Hooks는 currentValue에 해당하는 값과, 해당 값을 업데이트하는 함수를 반환해야 한다.

React Hooks: Custom Hooks

댓글