3. 로그인 페이지 구현

react bootstrap의 Form을 이용하여 로그인 페이지를 구성해보자.

아래의 공식 홈페이지에서 예시 파일을 복사해서 필요에 맞게 수정해봤다.

React-Bootstrap

Login.js 파일

import { Container } from 'react-bootstrap';
import Form from 'react-bootstrap/Form';
import { Link } from 'react-router-dom';

function Login() {
  return (
    <Container>
      <Form>
        <Form.Group className="mb-3" controlId="formBasicText">
          <Form.Label>ID</Form.Label>
          <Form.Control type="text" placeholder="Enter ID" className='col-2'/>
        </Form.Group>
        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>
        <Form.Group className="mb-3" controlId="formBasicCheckbox">
        </Form.Group>
        <Form.Group>
          <Link to='/' className='m-1'>아이디 찾기</Link>
          <Link to='/' className='m-1'>비밀번호 찾기</Link>
        </Form.Group>
        <Form.Group>
          <Link to='/' className='m-1 btn btn-primary'>회원가입 </Link>
          <Link to='/' className='m-1 btn btn-primary'>로그인</Link>
        </Form.Group>
      </Form>
    </Container>
  );
}

export default Login;

위와 같은 화면이 구성됨을 볼 수 있다.

근데 나는 ID와 Password 레이블을 옆으로 수평하게 배치하고 싶어서 아래 링크 참고해서 바꿨다.

React-Bootstrap

import { Row, Col, Container } from 'react-bootstrap';
import Form from 'react-bootstrap/Form';
import { Link } from 'react-router-dom';

function Login() {
  return (
    <Container>
      <Form>
        <Form.Group as={Row} className="mb-3" controlId="formBasicText">
          <Form.Label column sm={2}>ID</Form.Label>
          <Col>
            <Form.Control type="text" placeholder="Enter ID"/>
          </Col>
        </Form.Group>
        <Form.Group as={Row} className="mb-3" controlId="formBasicPassword">
          <Form.Label column sm={2}>Password</Form.Label>
          <Col>
            <Form.Control type="password" placeholder="Password" />
          </Col>
        </Form.Group>
        <Form.Group>
          <Link to='/' className='m-1'>아이디 찾기</Link>
          <Link to='/' className='m-1'>비밀번호 찾기</Link>
        </Form.Group>
        <Form.Group>
          <Link to='/' className='m-1 btn btn-primary'>회원가입 </Link>
          <Link to='/' className='m-1 btn btn-primary'>로그인</Link>
        </Form.Group>
      </Form>
    </Container>
  );
}

export default Login;