리액트 회원가입 페이지 구현 예시

리액트 회원가입 페이지 구현 예시

UserLogin.jsx 파일

import React from "react"; import { Redirect, Link, Switch, BrowserRouter, Route, useHistory, useLocation, } from "react-router-dom"; import LoginForm from "./LoginForm"; import RegisterForm from "./RegisterForm"; const users = []; // '/register' path를 추가하세요. export default function UserLogin() { return ( ); } function HomePage() { return ( Welcome to my homepage. Login ); } // users 리스트에 등록된 회원인 경우에만 회원의 상세한 정보를 띄우는 코드를 작성하세요. function LoginPage() { const history = useHistory() const handleSubmit = (formData) => { const foundUser = users.find(user => user.email === formData.email && user.password === formData.password) if(!foundUser) return history.push(`/detail?email=${formData.email}&password;=${formData.password}`) } return ( Login Page Back to home Register ); } function UserDetailPage() { const location = useLocation(); const searchParams = new URLSearchParams(location.search); const email = searchParams.get("email"); const password = searchParams.get("password"); if (!email || !password) { return ; } return ( User Detail Page User details {email} {password} Logout ); } // '/register'로 이동 시 RegisterForm으로 렌더링하는 코드를 작성하세요. function RegisterPage() { const history = useHistory(); const handleSubmit = (formData) => { users.push(formData) history.push('/login') }; return ( Register Page Back to home Login ); }

RegisterForm.jsx

import React, { useRef } from "react"; export default function RegisterForm({ onSubmit }) { const emailRef = useRef(); const passwordRef = useRef(); const submitForm = (e) => { e.preventDefault(); const email = emailRef.current.value; const password = passwordRef.current.value; const formData = { email, password, }; onSubmit(formData); }; return ( Email Password Register ); }

LoginForm.jsx

import React, { useRef } from "react"; export default function LoginForm({ onSubmit }) { const emailRef = useRef(); const passwordRef = useRef(); const submitForm = (e) => { e.preventDefault(); const email = emailRef.current.value; const password = passwordRef.current.value; const formData = { email, password, }; onSubmit(formData); }; return ( Email Password Login ); }

App.js

import React from 'react'; import './App.css'; import UserLogin from './UserLogin/UserLogin' function App() { return ( ); } export default App;

from http://albomin.tistory.com/31 by ccl(A) rewrite - 2021-10-13 16:01:00