-
#1-7 회원가입 state와 custom hookReact로 nodebirdSNS 만들기 (인프런)/#1 Hello, Next.js 2020. 1. 5. 19:49
- signup.js
import React, { useState } from "react"; import AppLayout from "../components/AppLayout"; import Head from "next/head"; import { Form, Input, Checkbox, Button } from "antd"; const Signup = () => { const [id, setId] = useState(""); const [nick, setNick] = useState(""); const [password, setPassword] = useState(""); const [passwordCheck, setPasswordCheck] = useState(""); const [term, setTerm] = useState(false); const [passwordError, setPasswordError] = useState(false); const [termError, setTermError] = useState(false); const onSubmit = e => { e.preventDefault(); if (password !== passwordCheck) { return setPasswordError(true); } if (!term) { return setTermError(true); } console.log({ id, nick, password, passwordCheck, term }); }; const onChangeId = e => { setId(e.target.value); }; const onChangeNick = e => { setNick(e.target.value); }; const onChangePassword = e => { setPassword(e.target.value); }; const onChangePasswordCheck = e => { setPasswordError(e.target.value !== password); setPasswordCheck(e.target.value); }; const onChangeTerm = e => { setTermError(false); setTerm(e.target.checked); }; return ( <> <Head> <title>NodeBird</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.25.3/antd.min.css" /> </Head> <AppLayout> <Form onSubmit={onSubmit} style={{ padding: 10 }}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} required onChange={onChangeId} /> </div> <div> <label htmlFor="user-nick">닉네임</label> <br /> <Input name="user-nick" value={nick} required onChange={onChangeNick} /> </div> <div> <label htmlFor="user-password">비밀번호</label> <br /> <Input name="user-password" type="password" value={password} required onChange={onChangePassword} /> </div> <div> <label htmlFor="user-password-check">비밀번호체크</label> <br /> <Input name="user-password-check" type="password" value={passwordCheck} required onChange={onChangePasswordCheck} /> {passwordError && ( <div style={{ color: "red" }}>비밀번호가 일치하지 않습니다.</div> )} </div> <div> <Checkbox name="user-term" checkbox={term} onChange={onChangeTerm}> 성공을 향해 한발자씩 걸어나갈것을 동의합니다. </Checkbox> {termError && ( <div style={{ color: "red" }}>약관에 동의 하셔야 합니다.</div> )} </div> <div style={{ marginTop: 10 }}> <Button type="primary" htmlType="submit"> 가입하기 </Button> {/* // button type="submit"하려면 htmlType="submit"라고해야함 */} </div> </Form> </AppLayout> </> ); }; export default Signup;'React로 nodebirdSNS 만들기 (인프런) > #1 Hello, Next.js' 카테고리의 다른 글
#1-6 회원가입 폼 만들기 (0) 2020.01.04 #1-5 기본 페이지틀 만들기 (0) 2020.01.04 #1-4 Ant design 적용 (0) 2020.01.04 #1-3 Next 라우팅 시스템 (0) 2020.01.04 #1 프로젝트 구조 (0) 2020.01.04