[react]로그인 기능 구현(프론트)

 

프론트 react 백엔드 Django 사용 

• 입력한 이메일, 비밀번호를 상태(state)로 관리하고
• 로그인 버튼 누르면
  • Django 서버에 axios로 로그인 요청 보내기
  • 성공 ➔ JWT 토큰 저장 ➔ /cases 페이지로 이동 (useNavigate 사용)
  • 실패 ➔ "로그인 실패" 알림 띄우기

1. axios란?

React 안에서 서버랑 통신하는 라이브러리

서버로 요청(request)을 보내고, 서버가 보내준 응답(response)을 받아오는 일을 대신해줘.

2. axios 통신 기본 구조

import axios from 'axios';

// 요청 보내기
axios.post('서버주소/login/', {
  email: 'test@example.com',
  password: '1234'
})
.then(response => {
  console.log('서버 응답:', response.data);
})
.catch(error => {
  console.error('에러 발생:', error);
});

 

요약하면:

• axios.post(url, 데이터) → 서버에 데이터 보내기
• .then() → 성공했을 때 응답 처리
• .catch() → 실패했을 때 에러 처리

3. axios가 내부적으로 하는 일

 

• axios.post()를 부른다.
• HTTP 요청이 Django 서버로 날아간다.
• 서버가 요청을 받아서 응답을 준다.
• 응답 결과를 .then()에서 받을 수 있다.
• 요청 실패나 서버 오류가 나면 .catch()로 잡는다.

4.React에서 axios 통신 흐름

• 버튼 클릭 → axios 요청 → 결과 처리

[유저]
로그인 버튼 클릭
  ↓
[React]
axios.post로 로그인 요청
  ↓
[Django 서버]
아이디 비번 확인 → 토큰 발급
  ↓
[React]
성공: 토큰 저장 + 페이지 이동
실패: 에러메시지 보여주기

 

로그인 기능 구현 흐름

1. 이메일, 비밀번호 입력값 관리

• useState로 이메일, 비밀번호 값을 상태로 저장

2. 로그인 버튼 클릭

• axios.post로 Django 서버에 로그인 요청 보내기

3. 로그인 성공

• 받은 토큰을 localStorage에 저장
• useNavigate로 /cases로 이동

4. 로그인 실패

• 에러 알림 띄우기

 

 

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import '../styles/LoginPage.scss';

useState: 입력값(이메일, 비밀번호)을 React state로 관리

useNavigate: 로그인 성공했을 때 다른 페이지로 이동

axios: 서버에 로그인 요청 보내기 위해 불러옴

'../styles/LoginPage.scss': 로그인 화면에 적용할 스타일 파일 불러오기.

1. 이메일, 비밀번호 입력값 관리

function LoginPage() {
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  ...
}

function LoginPage() 

• LoginPage 컴포넌트를 시작
• 이게 화면에 표시될 '로그인' 페이지를 정의하는 함수

useNavigate 원리

브라우저를 새로고침 없이 다른 URL로 부드럽게 이동

 

 

나중에 이걸 호출하면 브라우저 주소를 바꿀 수 있음

예: navigate('/cases') 하면 /cases 페이지로 이동!

이메일, 비밀번호 입력값 관리(useState)

 

• email, password라는 **상태(state)**를 만든다.
• 처음 값은 빈 문자열 ''.
• setEmail(), setPassword() 함수를 호출하면 각각 입력값을 업데이트할 수 있다.

• email: 현재 저장된 값 (처음에는 '', 빈 문자열)
• setEmail(): 값을 바꿔주는 함수

입력창에 뭔가 입력할 때
→ setEmail(새로운 값) 호출해서 상태를 바꾼다.

 

useState는

"컴포넌트 안에서 기억해야 할 값을 저장하는 기능"이야

 

2. 로그인 버튼 클릭

const handleLogin = async () => {
    try {
      const response = await axios.post(`${import.meta.env.VITE_API_URL}/login/`, {
        email,
        password
      });
      // 로그인 성공 (예: 토큰 저장)
    } catch (error) {
      // 로그인 실패
    }
  };

handleLogin 함수

 

 

 

• 로그인 버튼을 눌렀을 때 실행할 함수
• function LoginPage() 안쪽에 위치
• 비동기(async) 함수라서 await로 서버 응답을 기다릴 수 있어.

비동기(asynchronous)란

응답 기다리는 동안 다른 일 가능

 

• async를 함수 앞에 붙이면 "나는 비동기 함수야!" 선언
• await을 붙이면 "이 줄은 서버 응답을 기다릴게!" 라는 뜻

 

"코드가 순서대로 쭉 실행되지 않고,
서버의 응답 같은 '오래 걸리는 일'을 기다렸다가 결과가 오면 그때 처리하는 것"

try {
  const response = await axios.post(`${import.meta.env.VITE_API_URL}/login/`, {
    email,
    password
  });

 

 

 

axios로 POST 요청을 보내는 부분

 

• Django 서버의 /login/로 이메일과 비밀번호를 보낸다.
• 서버가 로그인 성공하면 응답을 돌려줌. 에러날 시 catch(error)
• 💡 axios 통신 원리:
  axios가 서버에 요청(request)을 보내고, 서버의 응답(response)을 기다린다.

성공시

const token = response.data.token;
localStorage.setItem('token', token);
navigate('/cases');

 

 

• 서버가 응답(response)으로 준 token을 localStorage에 token이라는 이름으로 저장한다.
• token은 서버가 발급하는 로그인 인증 사인.
• 로그인 할때마다 새로운 토큰을 localstorage에 저장함 (덮어쓰기)
• 이 토큰이 존재할 때 로그인 상태 유지 

navigate

• 토큰 저장 끝났으면 /cases 페이지로 이동한다.
• 새로고침 없이, 부드럽게 URL만 바뀌면서 페이지 이동

localStorage	브라우저에 데이터(토큰)를 저장하는 저장소. 새로고침해도 남아있음.
useNavigate	React 안에서 부드럽게 다른 페이지로 이동하는 함수. 새로고침 없이 이동!

 

실패시

} catch (error) {
  alert('로그인 실패! 이메일 또는 비밀번호를 확인하세요.');
  console.error(error);
}

 

• 서버 요청에 실패하거나, 로그인 정보가 틀리면 에러가 발생 -> catch 블록이 실행
• 사용자한테 "로그인 실패" 알림을 띄우고,
• 콘솔에도 에러를 찍어서 개발자가 무슨 문제인지 알 수 있게 한다.