react - custom-hook

custom-hook

여러 컴포넌트에서 비슷한 기능을 공유할 경우,
사용자 정의 custom hook을 작성하여 로직을 재사용 할 수 있다.

반복되는 로직

const [username, setUsername] = useState('');
            const [email, setEmail] = useState('');
            const [password, setPassword] = useState('');
            
            const handleUsername = (e) => setUsername(e.target.value);
            const handleEmail = (e) => setEmail(e.target.value);
            const handlePassword = (e) => setPassword(e.target.value);

custom hook으로 변경

function useInput() {

            const [value, setValue] = useState('');
            const onChange = (e) => setValue(e.target.value);

            return { value, onChange };
        }

return 반복되는 로직

return (
                <div>
                    <label>이름 : </label>
                    <input type="text" id="username" value={ username } onChange={ handleUsername } />    
                    <br/>     
                    <label>비밀번호 : </label>
                    <input type="password" id="password" value={ password } onChange={ handlePassword } />
                    <br/>
                    <label>이메일 : </label>
                    <input type="email" id="email" value={ email } onChange={ handleEmail } />
                    <br/>
                    <h4>usename : { username }</h4>
                    <h4>password : { password }</h4>
                    <h4>email : { email }</h4>
                </div>
            );

return custom hook으로 변경

value={ username.value }를 spread 연산자로 작성할 수 있다. -> { ...password }

return (
                <div>
                    <label>이름 : </label>
                    <input type="text" id="username" value={ username.value } onChange={ username.onChange } />    
                    <br/>     
                    <label>비밀번호 : </label>
                    <input type="password" id="password" { ...password } />
                    <br/>
                    <label>이메일 : </label>
                    <input type="email" id="email"  { ...email } /> //sprad 연산자로 작성
                    <br/>
                    <h4>usename : { username.value }</h4>
                    <h4>password : { password.value }</h4>
                    <h4>email : { email.value }</h4>
                </div>
            );