로그인 페이지 및 라우터 연결 - LoginPage

 

지금까지 회원가입 기능까지 잘 구현했고 로그인 기능을 구현 하려 한다.

앞서 백엔드에 로그인 라우터 ( /api/auth/login )가 있고 authController.js에서 로직 처리도 해 놓았다.

 

이제, 로그인 폼 화면을 만들고 라우터를 추가해 접근이 가능하게 하기 위한 작업이다.

 

| Login 페이지 기본 작성

 

frontend/src/pages/LoginPage.js

// src/pages/LoginPage.js

import React, { useState } from 'react';
import axios from 'axios';

const LoginPage = () => {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [message, setMessage] = useState('');

  const handleChange = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:5000/api/auth/login', formData);
      setMessage('로그인 성공!');
      console.log(res.data);  
    } catch (err) {
      console.error(err);
      setMessage('로그인 실패');
    }
  };

  return (
    <div>
      <h2>로그인</h2>
      <form onSubmit={handleSubmit}>
        <input type="email" name="email" placeholder="이메일" onChange={handleChange} required />
        <input type="password" name="password" placeholder="비밀번호" onChange={handleChange} required />
        <button type="submit">로그인</button>
      </form>
      <p>{message}</p>
    </div>
  );
};

export default LoginPage;

 

/ useState : email, password 값을 저장할 상태 formData와 로그인 결과 메시지를 위한 message선언

/ handleChange : 입력값이 변경될 때 해당 값을 formData에 업데이트

/ handleSubmit : 폼 제출시 axios로 서버에 로그인 요청 보냄

 

 

 

| 라우터 연결

이미 회원가입 페이지 구현시 작성했던 App.js에 페이지를 불러오도록(import) 하고 Route를 추가해주면 된다.

 

frontand/src/App.js

// frontend/src/App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import RegisterPage from './pages/RegisterPage';
import LoginPage from './pages/LoginPage';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/register" element={<RegisterPage />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </Router>
  );
};

export default App;

 

 

 

브라우저 http://localhost:3000/login 에서 확인한다.