4. 회원가입 페이지 (Client -> 프론트엔드)

RegisterPage 폴더 안에 RegisterPage.js를 생성 후 만들었습니다.

 

import React from 'react';

import {Formik} from 'formik';

import * as Yup from 'yup';

import {Form, Input, Button} from 'antd';

function RegisterPage(){

    return(

        <div>

            <div><h3>Sign up</h3></div>

            <Formik initialValues={{ name="", email:''", password: "", confirmpassword: ''"}}

                          validationSchema = {Yup.object().shape({

                                name: Yup.string().required("Name is required"),

                                email: Yup.string().email("Email is invalid").required("Email is required),

                                password: Yup.string().min(6,"Password must be at least 6 letters").required("Password is required")

                                confirmpassword: Yup.string().oneOf([Yup.ref("password"),null], "Password must be m                                                       atch").required("ConfirmPassword is required)}

                              )} >

                 <Form>

                        <Form.Item required label="이름">

                              <Input id = "name" type="text" placeholder="Enter your name" />

                        </Form.Item>

                        <Form.Item required label ="아이디">

                              <Input id = "email" type="email" placeholder="Enter your email" />

                        </Form.Item>

                         <Form.Item required label = "비밀번호">

                               <Input id = "password" type="password" placeholder="Enter your password" />

                         </Form.Item>

                        <Form.Item required label = "비밀번호 확인">

                                <Input id = "confirmpassword" type="password" placeholder = "Confirm your password" />

                         </Form.Item>

                          <Button type="primary">Submit</Button>

                 </Form>

                </Formik>

           </div>

 

     )

}

 

export default RegisterPage;

 

 

Formik : React Native에서 컴포넌트들을 빌드하기 위한 React 구성 요소 및 Hook들의 작은 그룹

 

Yup: 스키마의 유효성 검증 라이브러리

 

Antd:  디자인 라이브러리 (여기에서는 Form, Input, Button 을 사용함)