0727 useInput 커스텀 훅

웹 개발/React

0727 useInput 커스텀 훅

헤일리_HJ 2021. 7. 27. 16:51

import Head from 'next/head'
import { useState } from 'react'
import FormLayout from '../component/FormLayout'


const useInput = (defaultValue) =>{
    const [value,setValue] = useState(defaultValue)
    const onChange = e =>{
        const {value} = {...e.target}
        setValue(value)
    }

    return{
        value,
        onChange
    }
}

const Login = () => {
    const userid = useInput('')
    const userpw = useInput('')


    const handelSubmit = (e) =>{
        e.preventDefault()

        console.log(userid, userpw);
    }
    
    return (
        <>
            <Head>
                <title>Blog | Login</title>
            </Head>

            <FormLayout>
                <h2>Login</h2>
                <form onSubmit={handelSubmit}>
                    <input type="text" {...userid} placeholder='아이디를 입력하세요' />
                    <input type="password" {...userpw} placeholder='비밀번호를 입력하세요' />
                    <button type='submit'>로그인</button>
                </form>
            </FormLayout>
        </>
    )
}

export default Login

이거 왜 되냐?

{...userid}

{...userpw}

1. 위 아래 동일한거임

value = 'ok'

{...{'value':'ok'}}

2. 위 아래 동일한거임

{

value :'web7722'

onChange:()=>{alert(1)}

}

value = 'web7722' onChange={()=>{alert(1)}}