React 개념 채우기

Promise 는 비동기 작업의 결과를 나타내는 객체

 

Promise 는 시간이 지나면서 3가지 상태를 가진다

- pending : 처음 생성됐을때 결과가 없는 상태

- fulfilled : 작업이 성공적으로 끝나고 결과 값을 갖고 있는 상태

- rejected : 작업이 실패해서 에러 이유를 갖고 있는 상태

 

 

---

async, await 는 자바스크립트의 비동기 방식중 하나임

 

async 함수 안에서 await 키워드를 사용하면, 해당 비동기 작업이 완료될 때까지 코드 실행을 일시 중지하고 결과를 기다린 다음, 해당 결과를 반환한다.

 

 

 

출처: https://trustmitt.tistory.com/85 [kohigowild:티스토리]

 

 

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

// 로그인 상태를 확인하는 커스텀 훅입니다.
// 이 훅은 React 컴포넌트의 로직을 재사용할 수 있도록 분리해줍니다.
const useCheckLogin = () => {
    // isLoggedIn 상태와 로딩 상태를 관리합니다.
    // isLoggedIn: 로그인 여부 (true/false)
    // isLoading: 세션 확인 중인지 여부 (true/false)
    const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
    const [isLoading, setIsLoading] = useState<boolean>(true);

    useEffect(() => {
        const clientCheckLogin = async () => {
            try {
                // 백엔드 API를 호출하여 로그인 상태를 확인합니다.
                const response = await axios.get('http://localhost:8080/check-session', { withCredentials: true });
                const data = response.data;
                setIsLoggedIn(data.isLoggedIn);
            } catch (error) {
                console.error('로그인 상태 확인 중 오류 발생:', error);
                setIsLoggedIn(false);
            } finally {
                // API 호출이 완료되면 로딩 상태를 false로 변경합니다.
                setIsLoading(false);
            }
        };
        clientCheckLogin();
    }, []);

    // isLoggedIn과 isLoading 상태를 객체로 반환하여 컴포넌트에서 사용할 수 있도록 합니다.
    return { isLoggedIn, isLoading };
};

export default useCheckLogin;

 

gemini 의 도움을 받긴했지만 어쨋든 한줄한줄 이해하면서 짠 코드이다

 

const clientCheckLogin = async () =>

 

이부분은 clientCheckLogin 을 비동기함수로 선언한다는 뜻이다 그리고 이래야 await 도 사용이 가능함

 

const response = await axios.get('http://localhost:8080/check-session', { withCredentials: true });

이부분은 'http://localhost:8080/check-session' 여기서 요청이 끝날때까지 다음코드는 실행하지 않겠다는 뜻이다

withCredentials: true는 브라우저가 클라이언트 측의 쿠키를 서버로 보내도록 허용하는 옵션이며, 서버에서는 cors 미들웨어의 credentials: true 옵션을 통해 이 쿠키를 받아들이겠다고 허락하는 것입니다. 이 두 가지가 모두 있어야 쿠키를 사용한 세션 기반 인증이 정상적으로 작동합니다.