[javascript] 리액트에서 비동기 처리 방법

22 Dec 2023

javascript

리액트 애플리케이션을 개발할 때 비동기 작업을 다루는 것은 중요합니다. 네트워크 요청, 데이터베이스 조회, 파일 읽기 등과 같은 비동기 작업은 애플리케이션의 성능을 높이고 사용자 경험을 향상시키는 데 중요한 역할을 합니다.

1. Promises와 async/await

가장 일반적인 비동기 처리 방법은 Promises와 async/await 구문을 사용하는 것입니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    // 비동기 작업 수행
    if (/* 작업 성공 */) {
      resolve(data);
    } else {
      reject(error);
    }
  });
}

// async/await를 사용하여 비동기 작업 처리
async function fetchDataAsync() {
  try {
    const data = await fetchData();
    // 데이터 처리
  } catch (error) {
    // 에러 처리
  }
}

2. Axios를 이용한 HTTP 요청 처리

HTTP 요청을 처리하기 위해 axios와 같은 라이브러리를 사용하는 것이 일반적입니다. axios는 간편한 API와 함께 다양한 기능을 제공하여 네트워크 요청을 처리하는 데 용이합니다.

import axios from 'axios';

// GET 요청
axios.get('https://api.example.com/data')
  .then(response => {
    // 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

// POST 요청
axios.post('https://api.example.com/data', { data: payload })
  .then(response => {
    // 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

3. Fetch API 활용

Fetch API는 최신 웹 표준으로, 네트워크 요청에 대한 표준화된 방법을 제공합니다. 모던한 브라우저에서는 기본으로 내장되어 있어 추가 라이브러리를 사용하지 않고도 네트워크 요청을 간단하게 처리할 수 있습니다.

// GET 요청
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

// POST 요청
fetch('https://api.example.com/data', {
  method: 'POST',
  body: JSON.stringify(payload),
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

비동기 처리는 리액트 애플리케이션에서 핵심적인 부분이므로, 위의 방법 중 적절한 방법을 선택하여 애플리케이션의 요구에 맞게 비동기 작업을 처리하는 것이 중요합니다.