21.10.13 4주차 리엑트 - Welcome Homepage와 Login page만들기 로그인 페이지 예제

React 파일 구성

1. UserLogin

import React, { useRef } from "react";
import { useHistory } from "react-router-dom";

export default function LoginForm() {
  const history = useHistory();
  const emailRef = useRef();
  const passwordRef = useRef();

  const submitForm = (e) => {
    e.preventDefault();

    const email = emailRef.current.value;
    const password = passwordRef.current.value;
    
    // DetailPage로 이동하는 코드를 작성하세요.
    history.push(`/detail?email=${email}&password=${password}`)
  };

  return (
    <div>
      <form>
        <fieldset>
          <label htmlFor="email">Email</label>
          <input
            placeholder="Enter email."
            required
            ref={emailRef}
            id="email"
            type="email"
            name="email"
            autoComplete="off"
          />
        </fieldset>
        <fieldset>
          <label htmlFor="password">Password</label>
          <input
            required
            ref={passwordRef}
            id="password"
            type="password"
            name="password"
            placeholder="Enter password."
          />
        </fieldset>
        <button type="submit" onClick={submitForm}>
          Login
        </button>
      </form>
    </div>
  );
}

2. LoginForm.jsx

import React from "react";
// 필요한 모듈을 추가로 import하세요.
import {
  Switch,
  BrowserRouter,
  Route,
  Redirect,
  useLocation,
  Link,
  useParams
} from "react-router-dom";
import LoginForm from './LoginForm'

// HomePage 페이지 컴포넌트를 구현하세요.
function HomePage() {
  // Link 컴포넌트를 추가하세요.
  return (
    <div>
      <h2>Welcome to my homepage.</h2>
      <div>
        <Link to="login">Login</Link>
      </div>
    </div>
  );
}

// LoginPage 페이지 컴포넌트를 구현하세요.
function LoginPage() {
  return (
    <div>
      <h2>Login Page</h2>
      <LoginForm />
      <div>
        <Link to="/">Home</Link>
      </div>
    </div>
  );
}

// DetailPage 페이지 컴포넌트를 구현하세요.

function UserDetailPage() {
  // email, password 정보를
  // query param 으로 받아와 저장하고, 정보를 보여주세요.
  const location = useLocation()
  const searchParams = new URLSearchParams(location.search)
  const email=searchParams.get('email')
  const password=searchParams.get('password')
  if(!email || !password) {
    return <Redirect to="/login" />
  }
  return (
    <div>
      <h2>User Detail Page</h2>
      <p>
        <h3>User details</h3>
        <em>{email}</em>
        <br />
        <strong>{password}</strong>
      </p>
        <Link to="/">Logout</Link>
    </div>
  );
}

export default function UserLogin() {

  return (
    <BrowserRouter>
        <Switch>
            <Route exact path="/">
                <HomePage />
            </Route>
            <Route exact path="/login">
                <LoginPage />
            </Route>
            <Route exact path="/detail">
                <UserDetailPage />
            </Route>
        </Switch>
    </BrowserRouter>
  );
}

이렇게 파일을 구성(웰컴 페이지 + 로그인 페이지 + 디테일 페이지로 컴포넌트화) 하고, React Router DOM 을 사용하여

웹 페이지에 나타내면 다음과 같은 웹 화면을 띄울 수 있다!

 

 

 

 

 

1. 웰컴 페이지 /

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 로그인 페이지 /login
url도 유의깊게 보자!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 디테일 페이지 /detail?=email=입력한 이메일 $ password=비밀번호