React에서 비동기 처리 제대로 하기 – fetch, axios, async/await

 

React 애플리케이션은 종종 외부 API로부터 데이터를 가져오거나 전송해야 합니다. 이때 필요한 것이 바로 비동기 처리입니다. 이번 글에서는 fetch와 axios, 그리고 async/await 문법을 활용한 비동기 처리 방법을 살펴보겠습니다.

1. fetch API 기본 사용법

fetch는 자바스크립트에서 제공하는 기본 HTTP 클라이언트입니다.

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => setPosts(data))
    .catch(error => console.error(error));
}, []);

단점: 에러 처리와 JSON 파싱을 수동으로 해줘야 함

2. async/await로 fetch 더 깔끔하게 쓰기

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setPosts(data);
    } catch (error) {
      console.error('에러 발생:', error);
    }
  };
  fetchData();
}, []);

async/await를 쓰면 비동기 흐름을 동기처럼 표현할 수 있어 가독성이 높아집니다.

3. axios 사용법

axios는 fetch보다 강력한 기능을 제공하는 인기 있는 HTTP 클라이언트입니다.

import axios from 'axios';

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
      setPosts(response.data);
    } catch (error) {
      console.error('에러 발생:', error);
    }
  };
  fetchData();
}, []);

• 자동 JSON 변환
• 타임아웃, 요청 취소, 인터셉터 등의 고급 기능

4. 로딩 상태와 에러 핸들링 추가

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.get('/api/data');
      setData(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, []);

5. 비동기 처리 주의사항

• 컴포넌트가 언마운트되었는데 상태를 설정하면 오류 발생 → useEffect cleanup 고려
• 데이터 요청이 실패했을 때 사용자에게 피드백 제공

6. 마무리

React에서 비동기 처리는 필수 기술입니다. 상황에 따라 fetch를 사용할 수도 있고, 좀 더 편리한 axios를 활용할 수도 있습니다. 중요한 건 에러와 로딩에 대한 상태 관리까지 포함해 완성도 있는 로직을 구성하는 것입니다.