React에서 async/await을 활용한 비동기 처리

React에서 async/await을 활용한 비동기 처리 

React에서 API 요청 및 비동기 작업을 처리할 때 async/await을 활용하면 코드가 더욱 직관적이고 가독성이 좋아집니다. 이번 포스트에서는 async/await의 기본 개념부터 React에서 API 요청을 처리하는 방법까지 정리해보겠습니다.

---

1. async/await 기본 개념

🔹 기존의 .then() 방식 (Promise 기반)

JavaScript에서 비동기 작업을 수행할 때 Promise를 사용하는 방법입니다.

function fetchData() {
    return fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then(response => response.json()) // JSON 변환
        .then(data => console.log(data))   // 결과 출력
        .catch(error => console.error("에러 발생:", error));
}

fetchData();

✅ .then()을 사용하여 응답 데이터를 처리해야 합니다.
✅ .catch()를 사용하여 오류를 처리해야 합니다.

---

🔹 async/await 방식

async/await을 사용하면 비동기 작업을 동기 코드처럼 작성할 수 있습니다.

async function fetchData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
        const data = await response.json(); // JSON 변환
        console.log(data); // 결과 출력
    } catch (error) {
        console.error("에러 발생:", error);
    }
}

fetchData();

✅ await을 사용하면 비동기 작업이 완료될 때까지 기다렸다가 다음 코드가 실행됩니다.
✅ try-catch를 사용하여 오류를 쉽게 처리할 수 있습니다.

---

2. React에서 async/await을 활용한 API 요청

React 컴포넌트에서 API 요청을 수행하고 상태를 업데이트하는 방법을 살펴보겠습니다.

🔹 React에서 API 요청 (useEffect 활용)

React에서 useEffect를 사용하여 API 데이터를 가져오는 예제입니다.

import { useState, useEffect } from "react";

function TodoComponent() {
    const [todo, setTodo] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
                const data = await response.json();
                setTodo(data);
            } catch (error) {
                console.error("데이터 가져오기 실패:", error);
            } finally {
                setLoading(false);
            }
        }

        fetchData();
    }, []);

    if (loading) return <p>로딩 중...</p>;
    if (!todo) return <p>데이터 없음</p>;

    return (
        <div>
            <h2>할 일</h2>
            <p>{todo.title}</p>
        </div>
    );
}

export default TodoComponent;

 

✅ useEffect를 사용하여 API 데이터를 가져옴.
✅ await을 사용하여 데이터가 반환될 때까지 기다림.
✅ try-catch-finally를 사용하여 예외 처리를 수행.

---

3. React에서 async/await을 활용한 로그인 처리

🔹 로그인 API 요청 (axios 사용)

React에서 로그인 요청을 보내고 JWT 토큰을 저장하는 예제입니다.

import axios from "axios";

const apiClient = axios.create({
    baseURL: "http://localhost:8080",
});

export const retrieveLogin = async (username, password) => {
    try {
        const response = await apiClient.post("/auth/login", { username, password });
        return response.data; // JWT 토큰 반환
    } catch (error) {
        console.error("로그인 실패:", error.response ? error.response.data : error.message);
        throw error;
    }
};

✅ axios를 사용하여 API 요청을 간결하게 처리.
✅ await을 사용하여 응답 데이터를 기다린 후 반환.
✅ try-catch로 로그인 실패 시 에러 처리.

---

🔹 로그인 처리 함수 (async/await 사용)

async function login(username, password) {
    try {
        const data = await retrieveLogin(username, password);
        sessionStorage.setItem("token", data.token); // 토큰 저장
        return true;
    } catch (error) {
        console.log("로그인 실패");
        return false;
    }
}

✅ 로그인 성공 시 JWT 토큰을 sessionStorage에 저장.
✅ 실패 시 false를 반환하여 UI에서 에러 메시지를 표시할 수 있도록 처리.

---

🔹 로그인 버튼 이벤트 핸들러

async function handleSubmit(evt) {
    evt.preventDefault();
    const success = await login(username, password);

    if (success) {
        navigate("/");
    } else {
        setShowErrorMessage(true);
    }
}

✅ handleSubmit을 async function으로 선언하여 로그인 결과를 기다림.
✅ 로그인 성공 시 navigate("/")를 사용하여 홈으로 이동.
✅ 로그인 실패 시 setShowErrorMessage(true)로 에러 메시지 표시.

---

4. async/await vs .then() 비교

방식 사용법 코드 가독성 에러 처리

.then()	promise.then(result => {}).catch(error => {})	중첩이 많아지면 가독성이 떨어짐	.catch() 사용
async/await	const result = await promise	동기 코드처럼 깔끔함	try-catch 사용

✅ async/await을 사용하면 코드 가독성이 좋아지고 유지보수성이 향상됩니다!

---

✅ 결론

• async/await을 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있음.
• await을 사용하면 비동기 작업이 완료될 때까지 기다렸다가 코드 실행 가능.
• try-catch로 오류를 쉽게 처리할 수 있음.
• React에서 API 요청, 로그인 등의 작업에 활용하면 코드가 깔끔해지고 유지보수성이 향상됨.

이제 React에서 async/await을 활용하여 더 효율적인 비동기 작업을 할 수 있습니다!