React Native에서 Async/Await와 Promise로 비동기 프로그래밍 이해하기

React Native에서 비동기 프로그래밍을 이해하고 효율적으로 사용하는 방법을 알아보겠습니다. Async/Await와 Promise의 기본 개념부터 비동기 API 호출까지, React Native에서 비동기 코드를 효과적으로 작성하는 기법을 소개합니다.

 

비동기 프로그래밍이란?

프로그래밍을 할 때, 특히 React Native와 같은 모바일 앱을 개발할 때, 비동기 처리는 필수적입니다. 간단히 말해 비동기 프로그래밍은 어떤 작업이 완료될 때까지 기다리지 않고, 다른 작업을 동시에 수행할 수 있도록 하는 것입니다. 이는 특히 네트워크 요청이나 파일 입출력 등 시간이 오래 걸릴 수 있는 작업에서 매우 유용합니다.

동기 vs 비동기 프로그래밍

동기 프로그래밍에서는 각 작업이 순차적으로 실행됩니다. 즉, 앞선 작업이 완료될 때까지 다음 작업을 진행할 수 없습니다. 이 때문에 시간이 많이 걸리는 작업이 있다면, 그 작업이 완료될 때까지 앱 전체가 멈춰버리는 문제가 발생합니다. 반면 비동기 프로그래밍은 이러한 문제를 해결하기 위해 도입된 개념으로, 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 동시에 진행할 수 있습니다.

비동기 프로그래밍이 중요한 이유

React Native 앱은 사용자 경험(UX)이 매우 중요합니다. 네트워크 지연이나 데이터베이스 조회 같은 작업에서 사용자가 기다리게 되면, 앱의 반응성이 떨어져 사용자가 불편함을 느낄 수 있습니다. 비동기 프로그래밍을 통해 이러한 문제를 해결하고, 사용자가 앱을 더 자연스럽고 원활하게 사용할 수 있도록 하는 것이 중요합니다.

 

JavaScript에서 Promise의 역할

Promise의 기본 개념과 문법

Promise는 비동기 작업이 성공적으로 완료되었는지 또는 실패했는지를 나타내는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다.

• 대기(pending)
• 이행(fulfilled)
• 거부(rejected)

대기 상태에서 작업이 완료되면 이행 상태가 되며, 에러가 발생하면 거부 상태가 됩니다.

const promise = new Promise((resolve, reject) => {
	const success = true;

	if (success) {
		resolve('작업이 성공적으로 완료되었습니다.');
	} else {
		reject('작업에 실패했습니다.');
	}
});

promise
	.then((message) => {
		console.log(message);
	})
	.catch((error) => {
		console.error(error);
	});

 

위의 코드에서 resolve 함수는 작업이 성공했을 때 호출되며, reject 함수는 실패했을 때 호출됩니다. then()과 catch()를 통해 작업의 결과를 처리할 수 있습니다.

Promise 사용 예제

네트워크 요청을 할 때도 Promise를 사용할 수 있습니다. 예를 들어, fetch() API는 데이터를 비동기적으로 가져올 때 Promise를 반환합니다.

fetch('https://jsonplaceholder.typicode.com/users')
	.then((response) => response.json())
	.then((data) => console.log(data))
	.catch((error) => console.error('Error:', error));

 

Async/Await의 이해와 활용

Async/Await의 등장 배경

Promise는 비동기 처리를 훨씬 간결하게 만들었지만, 많은 then() 체인을 사용할 경우 가독성이 떨어질 수 있습니다. 이를 해결하기 위해 Async/Await가 등장했습니다. Async/Await는 비동기 코드를 마치 동기 코드처럼 작성할 수 있게 해주어 가독성을 크게 향상시킵니다.

Async/Await 사용 예제

아래는 Async/Await를 사용한 비동기 네트워크 요청 예제입니다.

const fetchData = async () => {
	try {
		const response = await fetch('https://jsonplaceholder.typicode.com/users');
		const data = await response.json();
		console.log(data);
	} catch (error) {
		console.error('Error:', error);
	}
};

fetchData();

 

이 예제에서 await 키워드를 사용하면 fetch() 함수가 완료될 때까지 기다리며, 그 결과를 변수에 할당할 수 있습니다. 이렇게 하면 then() 체인을 사용하지 않아도 되므로 코드가 훨씬 간결하고 읽기 쉬워집니다.

 

React Native에서 비동기 API 호출하기

Fetch API를 이용한 비동기 데이터 호출

React Native에서 비동기 프로그래밍을 사용해 데이터를 가져올 때 가장 일반적인 방법은 fetch() API를 사용하는 것입니다. fetch()는 네트워크 요청을 쉽게 처리할 수 있도록 도와주는 함수로, Promise를 반환합니다.

사용자 데이터 가져오기 예제

다음은 React Native 컴포넌트에서 사용자 데이터를 비동기적으로 가져오는 예제입니다.

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

const UserList = () => {
	const [users, setUsers] = useState([]);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		const fetchUsers = async () => {
			try {
				const response = await fetch('https://jsonplaceholder.typicode.com/users');
				const data = await response.json();
				setUsers(data);
				setLoading(false);
			} catch (error) {
				console.error('Error:', error);
				setLoading(false);
			}
		};
        
		fetchUsers();
	}, []);
    
	if (loading) {
		return <ActivityIndicator size="large" color="#0000ff" />;
	}
    
	return (
		<View>
			{users.map((user) => (
				<Text key={user.id}>{user.name}</Text>
			))}
		</View>
	);
};

export default UserList;

 

비동기 코드를 더 효율적으로 작성하기

에러 처리 방법 (try...catch)

try...catch는 비동기 함수에서 발생할 수 있는 오류를 처리하는 중요한 도구입니다. Async/Await를 사용할 때는 try...catch를 사용해 오류를 포착하고, 사용자에게 적절한 피드백을 제공할 수 있습니다.

비동기 함수의 최적화 팁

• 병렬 처리: 여러 비동기 작업을 병렬로 처리할 때는 Promise.all()을 사용할 수 있습니다. 이를 통해 여러 네트워크 요청을 동시에 보내고, 모든 요청이 완료될 때까지 기다릴 수 있습니다.
• 불필요한 await 피하기: 불필요하게 await을 사용하면 코드 실행이 느려질 수 있습니다. 필요할 때만 await을 사용하여 효율적인 비동기 처리를 구현하는 것이 좋습니다.

 

마무리하며

React Native에서 비동기 프로그래밍을 이해하고, Async/Await와 Promise를 적절히 활용하는 것은 효율적인 앱 개발의 핵심입니다. 이번 글에서는 비동기 프로그래밍의 개념부터 React Native에서 이를 사용하는 방법까지 살펴보았습니다. 효율적인 비동기 코드를 작성하여 앱의 반응성을 높이고, 사용자 경험을 개선하는데 도움이 되길 바랍니다.