[React] 회원가입

1. <Form> 만들기

<Form noValidate validated={this.state.validated} onSubmit={this.handleSubmit}>
  <Form.Group className="mb-3" controlId="formBasicEmail">
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="Enter email" name="email" value={this.state.email} onChange={this.handleChange}/>
    <Form.Text className="text-muted">
      We'll never share your email with anyone else.
    </Form.Text>
  </Form.Group>

  <Form.Group className="mb-3" controlId="formBasicPassword">
    <Form.Label>Password</Form.Label>
    <Form.Control type="password" placeholder="Password" name="password" value={this.state.password} onChange={this.handleChange}/>
  </Form.Group>
  
  <Form.Group className="mb-3" controlId="formBasicPassword">
    <Form.Label>Check Password</Form.Label>
    <Form.Control type="password" placeholder="Check Password" name="checkPw" value={this.state.checkPw} onChange={this.handleChange}/>
  </Form.Group>
  
  <Button variant="primary" type="submit">
    Submit
  </Button>
</Form>

참고

https://react-bootstrap.github.io/forms/overview/

2. state 추가

input에 작성된 값을 받기 위해서 state 추가가 필요하다.

constructor(props) {
	super(props);
        this.state = {
            email: "",
            password: "",
            checkPw: ""
        };
}

 

3. handleChange 함수 추가

input 필드에서 작성된 데이터를 state에 넣어주는 과정

[name] : 객체 안에서 key를 []로 감싸면, [] 안의 값이 가리키는 실제 값이 key 값이 된다.

handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
};

 

4. handleSubmit 함수 추가

Submit 버튼 클릭시 처리되는 함수

handleSubmit = (e) => {
	// 데이터 입력 여부 확인
	const form = e.currentTarget;
	if (form.checkValidity() === false){
		e.preventDefault(); //제출 시 새로고침 방지
		e.stopPropagation();
	}
	this.setState({validated: true});
		
	// 비밀번호 확인
	if(this.state.password === this.state.checkPw)
	{
		if(this.state.email && this.state.password && this.state.checkPw)
			alert("회원가입 성공"); // 필요에 맞게 수정
		else
			alert("회원가입 실패");	
	}
	else
	{
		alert("비밀번호를 확인해주세요.");
	}
};

 

5. 최종 코드

import React, {Component} from "react";
import { Button, Container, Form } from "react-bootstrap";
import Header from "../components/header";
import Content from "../components/content";

class SignUp extends Component{
	constructor(props){
		super(props);
		this.state = {
			validated: false,
			email: "",
			password: "",
			checkPw: ""
		};
	}

	handleChange = (e) => {
		this.setState({
			[e.target.name]: e.target.value
		});
	}

	handleSubmit = (e) => {
		// 데이터 입력 여부 확인
		const form = e.currentTarget;
		if (form.checkValidity() === false){
			e.preventDefault(); //새로고침 방지
			e.stopPropagation();
		}
		this.setState({validated: true});

		// 비밀번호 확인
		if(this.state.password === this.state.checkPw)
		{
			if(this.state.email && this.state.password && this.state.checkPw)
				alert("회원가입 성공"); // 필요에 맞게 수정
			else
				alert("회원가입 실패");	
		}
		else
		{
			 alert("비밀번호를 확인해주세요.");
		}
	};
    
	render(){
		var _title = "회원가입";
		var _content = <Container className="login">
				<Form noValidate validated={this.state.validated} onSubmit={this.handleSubmit}>
					<Form.Group className="mb-3" controlId="formBasicEmail">
						<Form.Label>Email address</Form.Label>
						<Form.Control type="email" placeholder="Enter email" name="email" value={this.state.email} onChange={this.handleChange}/>
						<Form.Control.Feedback type="invalid">이메일을 입력해주세요!</Form.Control.Feedback>
					</Form.Group>

					<Form.Group className="mb-3" controlId="formBasicPassword">
						<Form.Label>Password</Form.Label>
						<Form.Control type="password" placeholder="Password" name="password" value={this.state.password} onChange={this.handleChange}/>
						<Form.Control.Feedback type="invalid">비밀번호를 입력해주세요!</Form.Control.Feedback>
					</Form.Group>

					<Form.Group className="mb-3" controlId="formBasicPassword">
						<Form.Label>Check Password</Form.Label>
						<Form.Control type="password" placeholder="Check Password" name="checkPw" value={this.state.checkPw} onChange={this.handleChange}/>
						<Form.Control.Feedback type="invalid">비밀번호를 입력해주세요!</Form.Control.Feedback>
					</Form.Group>

					<Button variant="primary" type="submit">
						Submit
					</Button>
				</Form>
			</Container>

		return(
			<div>
				<Header></Header>
				<Content title={_title} content={_content}></Content>
			</div>
		);
	}
}

export default SignUp