react ant-design 회원 가입 폼 작업

react에서 ant-design을 이용해서 회원가입 폼 작업을 알아보자

 

순서는 다음과 같다.

 

1. 회원가입폼 작업

2. 회원가입 api 작업

3. 회원가입 테스트

 

그럼 작업을 시작해보자

 

1. 회원가입폼 작업

회원가입 폼은 ant-desing에서 제공해주는 샘플로 작업을 하였다.

기본 validation이 있어서 client-side 체크는 바로 된다.

 

서버의 경우는 다음과 같이 한다

const [form] = Form.useForm();
const [isValid, setIsValid] = useState(false);
const [error, setError] = useState("");
    
function onFinish(values) {
        setIsValid(false);
        setError("")
        addUser(values).then(response=>{
            if(response.status===400){
                setIsValid(true);
                setError(response.message)
            }
            if(response.status===200){
                alert("등록성공")
                console.log("등록성공.");
                setIsSuccess(true);
            }
        });
    }

 

서버 오류 발생시 setIsValid()와 setError() 메서드를 이용하여 셋팅을 하고

useEffect(() => {
        if(isValid){
            form.setFields([{
                name: "email",
                errors: [error],
            }]);
        }
    }, [isValid,error]);

 useEffect()와 form.setFields()를 이용해서 서버에서 발생한 오류를 셋팅한다.

참조: ant.design/components/form/v3

 

전체 소스는 다음과 같다.

import {Button, Form, Input} from "antd";
import {LockOutlined, MailOutlined, UserOutlined} from "@ant-design/icons";
import {Link, Route} from "react-router-dom";
import {addUser} from "../../api/User";
import {useEffect, useState} from "react";
import {Redirect} from "react-router";

const Signup = () => {

    const [form] = Form.useForm();
    const [isValid, setIsValid] = useState(false);
    const [error, setError] = useState("");
    const [isSuccess,setIsSuccess] = useState(false);

    useEffect(() => {
        if(isValid){
            form.setFields([{
                name: "email",
                errors: [error],
            }]);
        }
    }, [isValid,error]);

    function onFinish(values) {
        setIsValid(false);
        setError("")
        addUser(values).then(response=>{
            if(response.status===400){
                setIsValid(true);
                setError(response.message)
            }
            if(response.status===200){
                alert("등록성공")
                console.log("등록성공.");
                setIsSuccess(true);
            }
        });
    }
    return(
        <>
            <Form form={form} name={"normal_login"}
                  className={"login-form"}
                  initialValues={{remember:true}}
                  onFinish={onFinish}
                  xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}
            >
                <Form.Item
                    name={"name"}
                    rules={
                        [{
                            required: true,
                            message: 'Please Input your Username'
                        }]
                    }>
                    <Input prefix={<UserOutlined className={"site-form-item-icon"} placeholder={"Username"}/>}/>
                </Form.Item>
                <Form.Item
                    name={"email"}
                    rules={
                        [{
                            type: "email",
                            required: true,
                            message: 'Please Input your Email'
                        }]
                    }>
                    <Input prefix={<MailOutlined className={"site-form-item-icon"} placeholder={"Email"}/>}/>
                </Form.Item>
                <Form.Item
                    name={"password"}
                    rules={
                        [{
                            required: true,
                            messaeg: "please input your Password"
                        }]
                    }>
                    <Input
                        prefix={<LockOutlined className={"site-form-item-icon"}/>}
                        type={"password"}
                        placeholder={"Password"}
                    />
                </Form.Item>
                <Form.Item>
                    <Button type={"primary"} htmlType={"submit"} className={"login-form-button"}>
                        register now!
                    </Button>
                    Or <Link to={"/signin"}>Log in</Link>
                </Form.Item>
            </Form>
            <Route>
                {isSuccess?<Redirect to="/signin" />:''}
            </Route>
        </>
    )
}

export default Signup;

2. 회원가입 api 작업

import {URL_API} from "./GLOBAL_VAR";
import {getPostHeader} from "./Common";

const URL_ADDUSER = `${URL_API}/user`

function addUser(user){
    return fetch(URL_ADDUSER,getPostHeader(user)).then(resopnse => {
        return resopnse.json()
    }).then(response => {
        return response
    }).catch(error => {
        console.warn(error);
    })
}

export {
    addUser,
}

export const URL_API = "http://localhost:8080/api/v1";

export function getPostHeader(object){
    return {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(object)
    }
}

3. 회원가입 테스트

회원가입폼

입력이 없을시 오류

메일 중복 오류

{"status":400,"message":"EMAIL DUPLICATED","code":"MEMBER-ERR-400"}

가입 성공 

{"status":200,"message":"OK","code":"200"}

로그인 화면으로 이동