REACT 데이터베이스 연동 방법(REST API 사용)

React는 프론트엔드 라이브러리이므로, 데이터베이스와 직접적으로 연결되지는 않습니다. 하지만 React 애플리케이션은 일반적으로 REST API 또는 GraphQL API와 같은 백엔드 서비스와 통신하여 데이터를 가져오고 전송합니다.

React와 데이터베이스 간의 연결 방법은 크게 두 가지로 나뉩니다.

 

1. REST API를 사용한 연결 REST API는 Representational State Transfer Application Programming Interface의 약자로, HTTP를 통해 데이터를 전송하는 웹 서비스를 의미합니다. React 애플리케이션에서는 REST API를 통해 백엔드 서비스와 통신하여 데이터를 요청하고 응답을 받아올 수 있습니다. 이를 위해 React에서는 fetch()나 axios와 같은 라이브러리를 사용하여 API 요청을 보내고 응답을 처리합니다.
2. GraphQL API를 사용한 연결 GraphQL API는 REST API와 유사하지만, 클라이언트에서 필요한 데이터를 직접 요청할 수 있는 특징이 있습니다. React 애플리케이션에서는 GraphQL API를 사용하여 필요한 데이터만 요청하고 받아올 수 있습니다. 이를 위해 React에서는 apollo-client나 relay와 같은 라이브러리를 사용하여 GraphQL API 요청을 보내고 응답을 처리합니다.

 

React와 데이터베이스 간의 연결은 주로 API를 통해 이루어지며, 이를 위해 다양한 라이브러리와 프레임워크가 존재합니다. 이 중에서도 axios, fetch, apollo-client, relay 등은 React에서 자주 사용되는 라이브러리이며, 각각의 특징과 사용 방법을 숙지하는 것이 중요합니다.

 

 

 

React에서 REST API를 사용하여 데이터를 가져오는 방법은 다음과 같습니다

 

 

1. API 요청을 보내는 함수 작성 React 애플리케이션에서는 REST API 요청을 보내는 함수를 작성하여 API를 호출합니다. 이때 fetch()나 axios와 같은 라이브러리를 사용하여 API 요청을 보냅니다.

예를 들어, 다음과 같이 fetch() 함수를 사용하여 REST API를 호출할 수 있습니다.

 

function fetchData() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // API 응답 데이터를 처리하는 코드 작성
    });
}

위 코드에서 fetch() 함수는 'https://api.example.com/data' URL에 GET 요청을 보내고, 응답을 처리하기 위해 Promise를 반환합니다. 이후 .then() 메서드를 사용하여 JSON 형식으로 응답 데이터를 처리합니다.

 

 

2. API 요청 결과를 상태로 관리하기 API 요청 결과를 React 컴포넌트의 상태로 관리하여 UI를 업데이트합니다. 이를 위해 React의 useState() 훅을 사용합니다.

예를 들어, 다음과 같이 useState() 훅을 사용하여 API 응답 데이터를 상태로 관리할 수 있습니다.

 

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {/* API 응답 데이터를 사용한 UI 렌더링 */}
    </div>
  );
}

위 코드에서 useState() 훅은 data 상태 변수와 setData() 함수를 반환합니다. 이후 useEffect() 훅을 사용하여 컴포넌트가 마운트될 때 한 번만 API 요청을 보내고, 응답 데이터를 setData() 함수로 업데이트합니다. 이후 data 상태 변수를 사용하여 UI를 렌더링합니다.

 

 

3. 오류 처리하기 API 요청이 실패할 경우를 대비하여 오류 처리를 구현해야 합니다. 이를 위해 catch() 메서드를 사용하여 오류를 처리합니다.

예를 들어, 다음과 같이 catch() 메서드를 사용하여 API 요청 오류를 처리할 수 있습니다.

 

function fetchData() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // API 응답 데이터를 처리하는 코드 작성
    })
    .catch(error => {
      console.error('API 요청 오류:', error);
    });
}

위 코드에서 catch() 메서드는 API 요청이 실패할 경우 error 객체를 콘솔에 출력합니다.

 

 

4. API 요청에 필요한 인증 처리하기 API 요청에 인증이 필요한 경우, React에서는 보통 HTTP 헤더에 인증 정보를 포함하여 요청을 보냅니다.

 

예를 들어, 다음과 같이 fetch() 함수를 사용하여 API 요청에 인증 정보를 포함할 수 있습니다.

 

function fetchData() {
  const token = '인증 토큰';

  fetch('https://api.example.com/data', {
    headers: {
      Authorization: `Bearer ${token}`
    }
  })
    .then(response => response.json())
    .then(data => {
      // API 응답 데이터를 처리하는 코드 작성
    });
}

위 코드에서 fetch() 함수는 HTTP 요청 헤더에 Authorization 필드를 추가하여 인증 정보를 전송합니다.

 

 

5. API 요청 상태 표시하기 API 요청이 처리되는 동안 사용자에게 로딩 상태를 표시하는 것이 좋습니다. React에서는 이를 위해 useState() 훅을 사용하여 로딩 상태를 관리하고, useEffect() 훅을 사용하여 API 요청 처리 상태를 업데이트합니다.

예를 들어, 다음과 같이 useState() 훅과 useEffect() 훅을 사용하여 로딩 상태를 관리할 수 있습니다.

 

function MyComponent() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  useEffect(() => {
    setLoading(true);

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('API 요청 오류:', error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>로딩 중...</div>;
  }

  return (
    <div>
      {/* API 응답 데이터를 사용한 UI 렌더링 */}
    </div>
  );
}

위 코드에서 loading 상태 변수를 사용하여 로딩 상태를 관리합니다. 이후 useEffect() 훅을 사용하여 API 요청 처리 상태를 업데이트하고, if (loading) 구문을 사용하여 로딩 상태일 때 로딩 UI를 렌더링합니다. 로딩 상태가 아닐 경우 응답 데이터를 사용하여 UI를 렌더링합니다.