React에서 RESTful API와의 통신

 

React 애플리케이션을 개발할 때 RESTful API와의 통신은 필수적인 요소입니다. RESTful API를 통해 데이터를 가져오거나 전송하여 사용자 인터페이스를 동적으로 업데이트할 수 있습니다. 이 글에서는 React에서 RESTful API와의 통신 방법을 이해하기 쉽게 설명하고, 실제 예제를 통해 구현 방법을 소개합니다.

---

1. RESTful API란 무엇인가?

RESTful API는 클라이언트와 서버 간의 데이터 통신을 위한 아키텍처 스타일입니다. REST는 Representational State Transfer의 약자로, 다음과 같은 특징을 가집니다:

• HTTP 메서드 사용: GET, POST, PUT, DELETE 등을 사용하여 자원을 조작.
• URL을 통한 자원 식별: 각 자원은 고유한 URL로 식별.
• JSON 형식 사용: 대부분의 RESTful API는 데이터를 주고받을 때 JSON 형식을 사용.

---

2. React에서 RESTful API와 통신하는 방법

React에서 RESTful API와 통신하기 위해 가장 많이 사용하는 도구는 다음과 같습니다:

2.1 fetch API

JavaScript에 내장된 HTTP 요청 함수로, RESTful API와 통신할 수 있습니다.

fetch('https://api.example.com/resource')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Error:', error));

2.2 axios

axios는 Promise 기반의 HTTP 클라이언트로, 직관적이고 강력한 기능을 제공합니다.

import axios from 'axios';

axios.get('https://api.example.com/resource')
  .then((response) => console.log(response.data))
  .catch((error) => console.error('Error:', error));

2.3 React Query

React Query는 데이터 패칭, 캐싱, 동기화, 업데이트를 자동화하는 라이브러리로, RESTful API와의 통신을 효율적으로 관리합니다.

import { useQuery } from '@tanstack/react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/resource');
  return response.json();
};

const { data, error, isLoading } = useQuery(['resource'], fetchData);

---

3. RESTful API와 통신 예제

3.1 API 데이터 가져오기 (GET)

API 설명

• URL: https://jsonplaceholder.typicode.com/posts
• 메서드: GET
• 데이터: 게시물 리스트

컴포넌트 코드: Posts.js

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

const Posts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch posts');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return

Loading...

;
  if (error) return

Error: {error}

;

  return (

{posts.map((post) => (
• {post.title}
• {post.body}
))}

  );
};

export default Posts;

---

3.2 데이터 생성 (POST)

API 설명

• URL: https://jsonplaceholder.typicode.com/posts
• 메서드: POST
• 데이터: { title: "New Post", body: "This is a new post.", userId: 1 }

컴포넌트 코드: CreatePost.js

import React, { useState } from 'react';

const CreatePost = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const newPost = { title, body, userId: 1 };

    fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(newPost),
    })
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to create post');
        }
        return response.json();
      })
      .then((data) => setMessage(`Post created: ID ${data.id}`))
      .catch((err) => setMessage(`Error: ${err.message}`));
  };

  return (

Create a New Post

Title: setTitle(e.target.value)} />

Body: setBody(e.target.value)} /> </div> <button type="submit">Submit</button> </form> {message && <p>{message}</p>} </div> ); }; export default CreatePost;

---

3.3 데이터 수정 (PUT)

API 설명

• URL: https://jsonplaceholder.typicode.com/posts/1
• 메서드: PUT
• 데이터: { title: "Updated Title", body: "Updated Body", userId: 1 }

구현 코드

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ title: 'Updated Title', body: 'Updated Body', userId: 1 }),
})
  .then((response) => response.json())
  .then((data) => console.log('Updated post:', data));

---

3.4 데이터 삭제 (DELETE)

API 설명

• URL: https://jsonplaceholder.typicode.com/posts/1
• 메서드: DELETE

구현 코드

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE',
})
  .then((response) => {
    if (response.ok) {
      console.log('Post deleted');
    } else {
      console.error('Failed to delete post');
    }
  });

---

4. RESTful API 통신 시 유용한 팁

1. 로딩 상태 관리: 데이터 요청 중 로딩 상태를 UI에 표시하세요.
2. 에러 처리: 요청 실패 시 사용자에게 명확한 에러 메시지를 전달하세요.
3. 캐싱 활용: React Query 같은 라이브러리를 사용해 데이터 요청을 효율적으로 관리하세요.
4. 환경 변수 사용: API URL이나 비밀 키를 환경 변수로 저장하여 보안성을 높이세요.

   const API_URL = process.env.REACT_APP_API_URL;
   

---

5. 결론

React에서 RESTful API와 통신은 클라이언트 애플리케이션의 핵심 기능입니다. fetch, axios, React Query와 같은 도구를 사용하여 데이터를 가져오고, 생성하고, 수정하고, 삭제할 수 있습니다.

이제 여러분의 React 프로젝트에서 RESTful API를 활용해 동적인 애플리케이션을 만들어보세요! 🚀