로그인 페이지 만들기

앱 사용자가 자신의 자격 증명으로 로그인할 수 있는 페이지를 만들어 보겠습니다. 사용자 풀을 생성할 때 이메일을 사용자 이름으로 로그인과 회원가입을 허용하도록 설정했습니다. 이 부분은 회원가입 폼을 만들 때 더 자세히 다룰 예정입니다.

먼저 사용자의 이메일(사용자 이름으로 사용)과 비밀번호를 입력받는 기본 폼부터 만들어 보겠습니다.

컨테이너 추가하기

Change indicator 새로운 파일 src/containers/Login.tsx를 생성하고 다음 내용을 추가합니다.

import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Stack from "react-bootstrap/Stack";
import Button from "react-bootstrap/Button";
import "./Login.css";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function validateForm() {
    return email.length > 0 && password.length > 0;
  }

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
  }

  return (
    <div className="Login">
      <Form onSubmit={handleSubmit}>
        <Stack gap={3}>
          <Form.Group controlId="email">
            <Form.Label>Email</Form.Label>
            <Form.Control
              autoFocus
              size="lg"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </Form.Group>
          <Form.Group controlId="password">
            <Form.Label>Password</Form.Label>
            <Form.Control
              size="lg"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </Form.Group>
          <Button size="lg" type="submit" disabled={!validateForm()}>
            Login
          </Button>
        </Stack>
      </Form>
    </div>
  );
}

여기서 몇 가지 새로운 개념을 소개합니다.

컴포넌트 상단에서 useState 훅을 사용하여 사용자가 폼에 입력한 값을 저장합니다. useState 훅은 상태에 저장하려는 변수의 현재 값과 새로운 값을 설정하는 함수를 제공합니다.
그런 다음 setEmail과 setPassword 함수를 사용하여 상태를 폼의 두 필드에 연결합니다. 이 함수들은 사용자가 입력한 값(e.target.value)을 저장합니다. 새로운 상태를 설정하면 컴포넌트가 리렌더링됩니다. 이제 email과 password 변수에는 새로운 값이 저장됩니다.
폼 컨트롤에 두 상태 변수 email과 password의 값을 표시하도록 설정합니다. React에서 이 패턴은 현재 폼 값을 상태 변수로 표시하고 사용자가 무언가를 입력할 때 새로운 값을 설정하는 것을 제어 컴포넌트(Controlled Component)라고 합니다.
이메일 필드에 autoFocus 플래그를 설정하여 폼이 로드될 때 이 필드에 포커스가 자동으로 설정되도록 합니다.
또한 validateForm이라는 검증 함수를 사용하여 제출 버튼을 상태와 연결합니다. 이 함수는 단순히 필드가 비어 있지 않은지 확인하지만, 더 복잡한 작업도 쉽게 수행할 수 있습니다.
마지막으로 폼이 제출될 때 콜백 함수 handleSubmit을 트리거합니다. 현재는 브라우저의 기본 제출 동작을 막는 정도지만, 나중에 여기에 더 많은 작업을 추가할 예정입니다.

Change indicator 이제 src/containers/Login.css 파일에 몇 가지 스타일을 추가합니다.

@media all and (min-width: 480px) {
  .Login {
    padding: 60px 0;
  }

  .Login form {
    margin: 0 auto;
    max-width: 320px;
  }
}

이 스타일은 대략적으로 모바일이 아닌 화면 크기를 대상으로 합니다.

라우트 추가하기

Change indicator 이제 이 컨테이너를 앱의 나머지 부분과 연결하기 위해 src/Routes.tsx 파일의 <Home /> 라우트 아래에 다음 줄을 추가합니다.

<Route path="/login" element={<Login />} />

Change indicator 그리고 헤더에 컴포넌트를 포함시킵니다.

import Login from "./containers/Login.tsx";

이제 브라우저로 전환하여 로그인 페이지로 이동하면 새로 만든 폼을 볼 수 있습니다.

로그인 페이지 추가 스크린샷

다음으로, 로그인 폼을 AWS Cognito 설정에 연결해 보겠습니다.

로그인 페이지 만들기

컨테이너 추가하기

라우트 추가하기

SST Guide