[React] react 회원가입 폼 만들기

백엔드 : express

프론트엔드 : react typescript, bootstrap

데이터베이스 : ??

 

프론트엔드 부분부터 설명!

 

1. 리액트 설치

npm install -g create-react-app

2. 리액트 + 타입스크립트 프로젝트 만들기

npx create-react-app [프로젝트 이름] --template typescript
cd [프로젝트 이름]

3. bootstrap 설치하기

npm install react-bootstrap bootstrap --save

 

4. src 폴더 정리 (정리가 안 되어 있기 때문에 정리해줌)

5. 회원가입 컴포넌트 만들기

• components 폴더에 SignUp.tsx 파일 만들기

import React from 'react';

interface SignUpssProps {

  mark?: string;

};

const SignUps: React.FC<SignUpssProps> = ({ mark }) => {

    return (

        <div>

           

        </div>

    );

};

export default SignUps;

• App.tsx에 컴포넌트 추가
  • interface에 옵션 형식 변수를 사용하면 prop 값을 넘겨주지 않아도 된다.

import React from 'react';

import './styles/App.css';

import SignUps from './component/SignUp'

function App() {

  return (

    <div className="App">

      <SignUps />

    </div>

  );

}

export default App;

• 부트스트랩을 이용하여 회원가입 폼 작성
  • onchage를 사용하여 입력값이 바뀌었을 때 state변수를 바꿔준다.

  return (

        <div>

            <Form>

                <div className="mb-3">회원가입</div>

                <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">

                    <Form.Label column sm={2}>

                        Email

                    </Form.Label>&nbsp;&nbsp;

                    <Form.Control type="email" placeholder="email" onChange={(e) => {setEmail(e.target.value)}}/>

                </Form.Group>

                <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">

                    <Form.Label column sm={2}>

                        Name

                    </Form.Label>&nbsp;&nbsp;

                    <Form.Control type="name" placeholder="name" onChange={(e) => {setName(e.target.value)}}/>

                </Form.Group>

                <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">

                    <Form.Label column sm={2}>

                        Password

                    </Form.Label>&nbsp;&nbsp;

                    <Form.Control type="password" placeholder="password" onChange={(e) => {setPassword(e.target.value)}}/>

                </Form.Group>

                <Form.Group as={Row} className="mb-3" controlId="formHorizontalEmail">

                    <Form.Label column sm={2}>

                        Confirm Password

                    </Form.Label>&nbsp;&nbsp;

                    <Form.Control type="password" placeholder="password" onChange={(e) => {setPasswordConfirm(e.target.value)}}/>

                </Form.Group>

               

                <Form.Group as={Row} className="mb-3" controlId="formHorizontalCheck">

                    <Col sm={{ span: 10, offset: 2 }}>

                        <Form.Check label="Remember me" onChange={(e) => {setCheck(e.target.checked)}}/>

                    </Col>

                </Form.Group>

                <Form.Group as={Row} className="mb-3">

                    <Col sm={{ span: 10, offset: 2 }}>

                        <Button

                        type="button"

                        onClick={submit}

                        >

                            Sign Up

                        </Button>

                    </Col>

                </Form.Group>

            </Form>

        </div>

    );

• 필요한 state 변수 정의
•  useState?
  • React Hook : 특별한 함수
  • state를 함수 컴포넌트 안에서 사용할 수 있게 해준다
  • useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.

import React, { useState } from 'react';

...

 

const SignUps: React.FC<SignUpssProps> = ({ mark }) => {

    const [email, setEmail] = useState("");

    const [name, setName] = useState("");

    const [password, setPassword] = useState("");

    const [passwordConfirm, setPasswordConfirm] = useState("");

    const [check, setCheck] = useState(false);

...

• 간단하게 입력값이 채워져있는지 체크해준다

    const submit = () : void => {

        if ((email === "" ||

            name === "" ||

            password === "" ||

            passwordConfirm === "") ||

            check === false) {

            alert('check')

            return;

        }

        console.log(email, name, password, passwordConfirm, check);

    }