[javascript] 리액트와 RESTful API의 연동 방법

22 Dec 2023

javascript

리액트는 현대적이고 동적인 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다. RESTful API는 웹 서비스를 위한 아키텍처 스타일이며, HTTP 프로토콜을 통해 자원을 관리하는 방법을 제공합니다. 이번 블로그에서는 리액트와 RESTful API를 연동하여 데이터를 가져오고 보내는 방법에 대해 알아보겠습니다.

필요한 패키지 설치

먼저, RESTful API와의 통신을 위해 axios 패키지를 설치해야 합니다. npm을 이용하여 패키지를 설치합니다.

npm install axios

RESTful API와 통신하기

axios를 사용하여 RESTful API와 데이터를 주고받을 수 있습니다. 예를 들어, 서버에서 JSON 형식으로 데이터를 받아오고 리액트에서 이를 화면에 렌더링하는 경우를 살펴봅시다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h1>Data from API:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

위 예제에서 axios.get을 통해 RESTful API에서 데이터를 가져오고, 이를 상태로 관리하여 화면에 렌더링하고 있습니다.

RESTful API로 데이터 보내기

데이터를 RESTful API로 보내는 방법도 간단합니다. 예를 들어, 사용자가 폼을 통해 데이터를 입력하고 이를 RESTful API로 전송하는 기능을 구현할 수 있습니다.

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [formData, setFormData] = useState({});

  const handleSubmit = () => {
    axios.post('https://api.example.com/submit', formData)
      .then(response => {
        console.log('Data sent successfully');
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <form>
      <input type="text" value={formData.name} onChange={e => setFormData({ ...formData, name: e.target.value })} />
      <button type="button" onClick={handleSubmit}>Submit</button>
    </form>
  );
}

export default App;

위 예제에서는 axios.post를 사용하여 폼 데이터를 RESTful API로 보내고 있습니다.

이처럼, 리액트와 RESTful API를 연동하여 데이터를 주고받는 것은 간단하면서도 매우 중요한 작업입니다.

마치며

이번 포스트에서는 리액트와 RESTful API의 기본적인 연동 방법에 대해 알아보았습니다. RESTful API와의 효율적인 통신은 웹 애플리케이션 개발에서 매우 중요한 요소이며, 이를 효율적으로 다루는 것이 프로젝트의 성패를 가를 수 있습니다. RESTful API와의 통신을 위해 axios를 활용하는 방법을 숙지하면, 보다 유연하고 실용적인 웹 애플리케이션을 개발할 수 있을 것입니다.

참고문헌:

https://reactjs.org/
https://axios-http.com/