dukDukz

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)}}

 

*/

'웹 개발 > React' 카테고리의 다른 글

0729 Redux  (0) 2021.07.29
0727 Styled Component 의 장점 - props 값 전달 가능  (0) 2021.07.27
0727 Styled Components 환경설정 / useInput  (0) 2021.07.27
0726 Next의 기본 구조  (0) 2021.07.26
0723 webpack / NEXT 의 개념  (0) 2021.07.23
'웹 개발/React' Related Articles more