리액트 애플리케이션을 개발하다 보면 API 호출, 데이터 fetching, 또는 다른 비동기 작업을 수행해야 하는 경우가 많습니다. 이러한 상황에서 async/await를 통해 비동기 처리를 간편하게 할 수 있습니다. 특히 TypeScript와 함께 사용할 때는 더욱 강력한 타입 안정성을 활용할 수 있습니다.
이번 블로그에서는 TypeScript를 사용하여 리액트 컴포넌트에서 async/await를 사용하는 방법에 대해 살펴보겠습니다.
async/await의 기본 개념
async/await는 JavaScript 및 TypeScript에서 비동기 코드를 보다 명확하고 동기식으로 작성할 수 있게 해주는 기능입니다. async 키워드는 비동기 함수를 선언하는 데 사용되고, await 키워드는 Promise가 처리(resolve)될 때까지 기다립니다.
async/await를 사용한 API 호출
아래는 TypeScript를 사용하여 async/await를 이용해 API를 호출하는 예제입니다.
import React, { useEffect, useState } from 'react';
import { fetchData } from './api'; // API 호출을 위한 모듈
const MyComponent: React.FC = () => {
const [data, setData] = useState<any>(null);
useEffect(() => {
const fetchDataFromApi = async () => {
try {
const result = await fetchData(); // API 호출
setData(result);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchDataFromApi();
}, []);
return (
<div>
{/* 데이터 표시 */}
</div>
);
};
export default MyComponent;
위 예제에서는 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 fetchDataFromApi 함수를 호출합니다. fetchDataFromApi 함수는 async로 선언되어 있으며, API를 호출하고 데이터를 상태에 저장하는데 await를 사용합니다.
타입 안정성 활용
TypeScript를 사용하면 async/await를 통해 얻을 수 있는 가장 큰 이점 중 하나인 타입 안정성을 활용할 수 있습니다. Promise에서 반환되는 값의 타입을 명시하여 정확한 타입 검사를 수행할 수 있습니다.
interface Post {
userId: number;
id: number;
title: string;
body: string;
}
const fetchPost = async (): Promise<Post> => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
return data;
};
위 예제에서 fetchPost 함수는 Post 타입을 반환하는 것으로 명시되어 있습니다. 이를 통해 데이터를 사용하는 곳에서 정확한 타입을 활용하여 타입 안전성을 확보할 수 있습니다.
결론
TypeScript와 async/await를 사용하면 리액트 애플리케이션에서의 비동기 처리를 더욱 안전하고 명확하게 할 수 있습니다. 타입 안정성을 활용하여 코드의 신뢰성을 높이고, 에러 처리를 간편하게 구현할 수 있습니다.
참고 문헌:
이상으로 TypeScript를 활용한 리액트 컴포넌트에서의 async/await를 사용한 비동기 처리 방법에 대해 알아보았습니다. 감사합니다.