React와 API 연동하기

React와 API 연동하기

API 연동의 중요성

현대 웹 애플리케이션은 대부분 백엔드 서버나 외부 서비스와 통신하여 데이터를 주고받습니다. React 애플리케이션에서 API를 연동하는 것은 다음과 같은 이유로 중요합니다:

• 동적인 데이터 표시
• 사용자 인증 및 권한 관리
• 데이터 생성, 수정, 삭제 기능 구현
• 외부 서비스 활용 (결제, 지도, 소셜 미디어 등)

이 문서에서는 React 애플리케이션에서 API를 연동하는 다양한 방법과 패턴을 살펴보겠습니다.

API 요청 기본 방법

1. Fetch API

Fetch API는 모던 브라우저에 내장된 API로, 네트워크 요청을 처리할 수 있습니다.

function fetchPosts() {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      if (!response.ok) {
        throw new Error('네트워크 응답이 올바르지 않습니다');
      }
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('데이터를 가져오는 중 오류 발생:', error);
    });
}

async/await를 사용한 방식:

async function fetchPosts() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('네트워크 응답이 올바르지 않습니다');
    }
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('데이터를 가져오는 중 오류 발생:', error);
    throw error;
  }
}

2. Axios

Axios는 브라우저와 Node.js를 위한 Promise 기반 HTTP 클라이언트입니다. Fetch API보다 더 많은 기능을 제공하며, 사용하기 쉽습니다.

설치:

npm install axios

사용 예:

import axios from 'axios';

function fetchPosts() {
  axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error('데이터를 가져오는 중 오류 발생:', error);
    });
}

async/await 사용:

import axios from 'axios';

async function fetchPosts() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.error('데이터를 가져오는 중 오류 발생:', error);
    throw error;
  }
}