[0803] React Login form

# 아 !! 그만 공부하고 싶당 놀고싶엉 ~ 운동하고 싶엉 ~

 

참고 블로그

https://bloodstrawberry.tistory.com/633

로그인 폼 만들기 - useReducer로 Input 관리

https://bloodstrawberry.tistory.com/610

리액트 - 로그인 폼 만들기 Login Form

 

일단 내가 직접 만든 피그마 디자인은 다음과 같다.

React Router Dom

- react-router-dom은 React에서 웹 애플리케이션에 라우팅 기능을 제공하는 라이브러리입니다. 웹 사이트를 구성하는 각 페이지를 나타내는 컴포넌트를 URL에 매핑하여 사용자가 URL을 통해 서로 다른 페이지로 이동할 수 있도록 하는 기능을 제공합니다.

react-router-dom의 주요 컴포넌트와 기능은 다음과 같습니다:

BrowserRouter: HTML5의 history API를 사용하여 UI를 URL과 동기화하며, 주로 웹 브라우저에서 사용합니다.
Route: 주어진 URL 경로와 매칭될 때 특정 컴포넌트를 렌더링하는 컴포넌트입니다. 예를 들어, <Route path="/about" component={AboutPage} />는 URL 경로가 "/about"일 때 AboutPage 컴포넌트를 렌더링합니다.
Link: 사용자가 클릭했을 때 다른 경로로 이동할 수 있도록 하는 컴포넌트입니다. <Link to="/about">About</Link>는 "About" 텍스트를 클릭하면 "/about" 경로로 이동합니다. 이는 HTML의 <a> 태그와 비슷하지만, 페이지를 새로고침하지 않고 클라이언트 사이드에서 라우팅을 처리합니다.
Switch: 주어진 <Route>나 <Redirect> 중에서 가장 처음으로 매칭되는 것 하나만을 렌더링하는 컴포넌트입니다. 이를 통해 여러 라우트 중 하나만을 선택하여 렌더링할 수 있습니다.
이런 기능들을 사용하여 SPA(Single Page Application)에서 여러 화면을 표현하고, 사용자가 웹사이트 내에서 쉽게 이동하고 탐색할 수 있도록 합니다.

 

Example

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

// Home component
function Home() {
  return <h2>Home</h2>;
}

// About component
function About() {
  return <h2>About</h2>;
}

// Users component
function Users() {
  return <h2>Users</h2>;
}

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}