[React] 13강. Promise then에서 async/await로 리팩토링하기

Promise 방식의 API 호출

여러분, 기존에 Promise 방식을 사용하며 API를 호출한 경험이 있으신가요? 예를 들어, fetch API를 사용하여 데이터를 가져올 때, Promise의 then 메서드를 사용해서 체이닝을 하게 되죠. 이런 방식은 코드가 이렇게 복잡하게 얽히게 만듭니다.

javascript fetch(url) .then(response => response.json()) .then(data => { // 데이터 처리 }) .catch(error => { // 에러 처리 });

위 코드를 보면, 여러 단계가 겹쳐져서 가독성이 떨어지는 것을 느낄 수 있습니다. 이러한 구조는 '콜백 지옥'이라고 불리며, 코드 유지보수가 어려워지기 때문에 좋은 방법이 아니죠.

이런 문제를 해결하기 위해, async/await를 도입하면 코드가 훨씬 간결해질 수 있어요. 다음 섹션에서 async/await로 리팩토링하는 방법을 살펴보도록 하겠습니다.

async/await로 리팩토링하기

async/await를 사용하면 비동기 코드를 더 직관적으로 작성할 수 있습니다. Promise를 사용하는 대신, async 키워드를 붙여서 함수를 만들어주면 됩니다. 예를 들어, 위의 코드를 async/await로 변경해보면 다음과 같습니다.

javascript async function fetchData() { try { const response = await fetch(url); const data = await response.json(); // 데이터 처리 } catch (error) { // 에러 처리 } }

이렇게 await를 사용하면, 코드가 마치 동기적으로 실행되는 것처럼 보이기 때문에 가독성이 크게 향상됩니다. 에러 처리도 try/catch로 간단히 할 수 있어요.

리팩토링 과정에서 중요한 점은 기존의 Promise 코드를 함수로 분리하는 것입니다. 그러면 useEffect 훅 안에서 해당 함수를 호출하는 구조로 만들 수 있습니다. 예를 들어, 아래와 같이 구현할 수 있죠.

javascript useEffect(() => { const fetchData = async () => { // API 호출 }; fetchData(); }, []);

이제 API 호출을 더 간편하게 할 수 있게 되었습니다.

리팩토링의 이점과 주의사항

async/await로 리팩토링한 코드는 가독성이 높아질 뿐만 아니라, 에러 처리도 훨씬 쉬워집니다. 하지만 몇 가지 주의사항이 있어요. 첫째, async 함수 내에서만 await를 사용할 수 있다는 점입니다. 이 점을 명심해야 합니다.

또한, 여러 개의 비동기 작업을 병렬로 처리하고 싶다면 Promise.all을 사용하는 것이 좋습니다. 예를 들어, 여러 API를 동시에 호출하고 싶을 때는 다음과 같이 작성할 수 있습니다.

javascript const [data1, data2] = await Promise.all([fetch(url1), fetch(url2)]);

이렇게 하면 여러 API 호출을 동시에 처리할 수 있어 성능을 개선할 수 있습니다.

마지막으로, 리팩토링 후에는 항상 기능이 정상적으로 작동하는지 확인하는 것이 중요합니다. 이를 위해 테스트를 작성하거나, 콘솔 로그를 통해 확인하는 습관을 가져보세요.

이번 리팩토링을 통해 여러분의 코드가 훨씬 더 깔끔해졌길 바랍니다. 다음 시간에는 커스텀 훅을 활용하여 API 호출을 더 효율적으로 관리하는 방법을 알아보겠습니다. 기대해 주세요!