usestate, useNavigate

usestate의 선언

import React, { useState } from 'react';

const [현재 state, state 를 변경하기 위한 함수] = usestate('');

 

usestate의 초기값을 설정하는 방법은 그 상태값의 타입에 따라 달라집니다.

//string: 사용자 입력이나 텍스트를 저장할 때 주로 사용
const [email, setEmail] = useState('');

//number: 숫자 카운터나 점수를 저장할 때 주로 사용
const [count, setCount] = useState(0);

//boolean: 상태의 활성화 여부를 관리할 때 주로 사용
const [isVisible, setIsVisible] = useState(false);

 

useState에 대해 아주 잘 설명해놓은 블로그 링크▼
https://velog.io/@jaychang99/React-%EC%9D%98-useState-%EB%BF%8C%EC%8B%9C%EA%B8%B0

---

 

input으로 받은 이메일과 비밀번호를 사용하기 쉽게 useState으로 작성해보자

import React, { useState } from 'react';

const [email, setEmail] = useState(''); //반드시 컴포넌트 최상단 블록에 위치해야 한다.
const [password, setPassword] = useState('');

 

 

이메일과 비밀번호를 보내는 axios를 작성해보자

// 로그인 요청을 보내는 Axios 호출
const response = await axios.post('http://localhost:5000/api/login', {
    email,
    password
});

 

이메일과 비밀번호를 보내는 post요청함수를 작성해보자

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = async () => {
        try {
            await axios.post('http://localhost:5000/api/login', {
                email,
                password,
            });
        } catch (err) {
        	console.log(err);
        }
    };

 

handleSignup 함수는 서버와의 네트워크 요청을 처리하는 함수이기 때문에 async-await문법을 사용하여 비동기로 정의하였습니다. axios도 같은 이유로 비동기 처리하였습니다.

 

 

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    const handleLogin = async () => {
        try {
            const response = await axios.post('http://localhost:5000/api/login', {
                email,
                password,
            });

            setSuccess('로그인 성공!');
            setError('');
            // 로그인 성공 후 다른 작업을 추가할 수 있습니다. 예를 들어, 토큰 저장, 페이지 이동 등.
        } catch (err) {
            setError('로그인 실패. 이메일과 비밀번호를 확인해주세요.');
            setSuccess('');
        }
    };

 

---

useNavigate

 

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();