dukDukz
0727 useInput 커스텀 훅 본문
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 |