SignUpPage.js

import React, { useState, useEffect } from 'react';
import { Button, Form, Container, Navbar, Alert } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const INIT_USER = {
    username: '',
    nickname: '',
    email: '',
    password: '',
}

function SingUp() {
    const [validated, setValidated] = useState(false);
    const [user, setUser] = useState(INIT_USER)
    const [error, setError] = useState('')
    const [disabled, setDisabled] = useState(true)

    useEffect(() => {
        const isUser = Object.values(user).every(el => Boolean(el))
        //Boolean : 참거짓 판별
        //every : every뒤에 함수값이 return하는 값이 모두 참일때만 true출력 -> element가 하나도 빈 문자열이 존재하지 않을때
        //empty string때만 false로 나옴.
        isUser ? setDisabled(false) : setDisabled(true)
    }, [user])

    function handleChange(event) {
        const { name, value } = event.target
        // console.log(name, value)
        setUser({ ...user, [name]: value })
    }

    async function handleSubmit(event) {
        event.preventDefault();

        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        }
        setValidated(true);
        console.log(user)

        try {
            setError('')
            const response = await fetch('/api/users/signup', {
                //post, get같은게 주어지지 않으면 기본적으로 fetch에 get요청함
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(user)
            })
            const data = await response.json()
            console.log(data)
            // setUser(INIT_USER)
        } catch (error) {
            console.log(error)
            setError('오류가 발생했습니다!')
        }
    }

    return (
        <>
            <Navbar bg="dark" variant="dark">
                <Navbar.Brand>YDK Messenger</Navbar.Brand>
            </Navbar>
                                                                                                                                                     
            <div>
                <Form noValidate validated={validated} onSubmit={handleSubmit}>
                    <Container className="d-flex justify-content-center">
                        <div className="mt-5 p-5 shadow w-75">

                            <h2 className="text-center ">회원가입</h2>

                            <Form.Group controlId="formGroupUsername">
                                <Form.Label>이름</Form.Label>
                                <Form.Control
                                    required
                                    type="text"
                                    name="username"
                                    onChange={handleChange}
                                    value={user.username}
                                    placeholder="이름을 입력해주세요" />
                                <Form.Control.Feedback type="invalid">
                                    필수 정보입니다! 이름을 입력해주세요!
                            </Form.Control.Feedback>
                            </Form.Group>

                            <Form.Group controlId="formGroupNickname">
                                <Form.Label>별명</Form.Label>
                                <Form.Control
                                    required
                                    type="text"
                                    name="nickname"
                                    onChange={handleChange}
                                    value={user.nickname}
                                    placeholder="별명을 입력해주세요" />
                                <Form.Control.Feedback type="invalid">
                                    필수 정보입니다! 별명을 입력해주세요!
                            </Form.Control.Feedback>
                            </Form.Group>

                            <Form.Group controlId="formGroupEmail">
                                <Form.Label>이메일</Form.Label>
                                <Form.Control
                                    required
                                    type="email"
                                    name="email"
                                    onChange={handleChange}
                                    value={user.email}
                                    placeholder="이메일을 입력해주세요" />
                                <Form.Control.Feedback type="invalid">
                                    필수 정보입니다! 이메일을 입력해주세요!
                            </Form.Control.Feedback>
                            </Form.Group>

                            <Form.Group controlId="formGroupPassword">
                                <Form.Label>비밀번호</Form.Label>
                                <Form.Control
                                    required
                                    type="password"
                                    name="password"
                                    onChange={handleChange}
                                    value={user.password}
                                    placeholder="비밀번호를 입력해주세요" />
                                <Form.Control.Feedback type="invalid">
                                    필수 정보입니다! 비밀번호를 입력해주세요!
                            </Form.Control.Feedback>
                            </Form.Group>

                            {/* <Link to="./login"> */}
                                <Button 
                                disabled={disabled}
                                type='submit' 
                                variant="outline-success" 
                                size="lg" 
                                className="mr-4"
                                block>가입</Button>
                            {/* </Link> */}
                            {error && <Alert variant='danger'>
                                {error}
                            </Alert>}
                        </div>
                    </Container>
                </Form>
            </div >
        </>
    )
}

export default SingUp