1009 TIL-U

Section 15 HTTP 요청보내기 (예:데이터베이스 연결)

TIL1) 리액트 앱을 백엔드 서버 및 데이터베이스와 연결하기

리액트 앱에서 백엔드 서버와 데이터베이스(DB)에 데이터를 저장하고 관리하려면, 먼저 백엔드 서버(API)가 필요함. 이를 통해 데이터를 저장, 생성, 수정, 삭제할 수 있으며, 여러 사용자가 이 데이터에 접근할 수 있다. 리액트 앱에서 서버와의 연결은 HTTP 요청을 통해 이루어지며, 데이터를 주고받는 방법으로 fetch를 사용할 수 있다.

여기서! HTTP가 뭐냐면, 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜 이라고 함.

// 기본적인 POST 요청 예시
const submitData = async () => {
  const response = await fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: 'John Doe',
      age: 25,
    }),
  });

  if (!response.ok) {
    throw new Error('데이터 전송 실패');
  }
  const result = await response.json();
  console.log(result);
};

TIL2) Fetching Data (FE와 BE 연결)

데이터를 백엔드에서 가져오는 과정인 "데이터 페칭"은 리액트에서 자주 사용하는 패턴. fetch()를 사용해 서버로부터 데이터를 받아올 수 있다. 보통, 데이터를 가져오는 동안 "로딩 중" 상태를 표시하고, 완료되면 데이터를 화면에 표시

import { useEffect, useState } from 'react';

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('데이터 가져오기 실패:', error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  if (isLoading) return <p>로딩 중...</p>;

  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

useEffect를 사용해 컴포넌트가 처음 렌더링될 때 데이터를 가져온다.
데이터를 가져오는 동안 로딩 상태를 관리하고, 에러가 발생하면 콘솔에 에러 메시지를 출력

TIL3) HTTP 요청 보내지 않는 법

리액트 컴포넌트 함수 안에서는 async/await를 사용할 수 없지만, 이를 useEffect() 훅을 활용해 해결할 수 있다. useEffect는 비동기 코드를 처리할 수 있다.

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  };

  fetchData();
}, []);

컴포넌트 함수 안에서 async와 await을 사용할 수 없다는 점에서 주의해야 한다. 하지만, useEffect() 훅을 활용하면 컴포넌트가 마운트되거나 업데이트될 때 자동으로 비동기 HTTP 요청을 보낼 수 있다.

useEffect 내에서 fetch를 사용하여 데이터를 비동기로 처리
데이터 요청 중일 때는 true, 데이터가 도착하면 false로 로딩 상태 관리

TIL4) HTTP 에러 다루기

HTTP 요청에서 발생할 수 있는 에러는 try-catch 구문을 통해 처리할 수 있다. 예를 들어, DB에서 데이터를 가져오는 과정에서의 에러를 처리할 때 다음과 같은 세 가지 상태를 useState로 관리

isFetching: 데이터를 가져오는 중인지 여부를 나타내는 상태
availablePlaces: 가져온 데이터가 저장될 상태
error: 에러가 발생했을 때의 상태

TIL5) 낙관적 업데이트 (Optimistic UI)

낙관적 업데이트는 데이터가 서버에 저장되기 전에 UI에서 먼저 변경 사항을 반영하는 방식이다. 서버 요청이 성공할 것이라는 가정을 하고 사용자에게 즉각적인 피드백을 제공하여 더 좋은 사용자 경험을 제공.

장점:

사용자에게 빠른 반응을 제공
서버 응답을 기다리지 않고 UI가 먼저 업데이트되므로, 사용자 경험 향상

TIL5) Delete HTTP

HTTP 요청 중 DELETE 메소드를 사용하여 서버에서 데이터를 삭제할 수 있습니다. 이 또한 비동기 요청으로 처리되며, 성공적으로 삭제된 후 상태를 업데이트하여 UI에 반영할 수 있다.

알쓸신잡

난 주로, 지금까지 Axios를 더 자주 사용했던것 같다. 그래서, Axios와 Fetch의 차이 및 장단점에 대해 작성해보겠당.

*TIL1) Axios vs Fetch 차이점

Axios:

Axios는 설치된 라이브러리를 사용하며, 훨씬 간결한 문법을 제공.
자동으로 JSON 데이터를 처리하고, 요청 시 더 많은 기능을 제공하는 장점이 있다.

import axios from 'axios';

// GET 요청 예시
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('에러 발생:', error));

Fetch:

Fetch는 브라우저 내장 API로, 별도의 설치가 필요하지 않고 Promise 기반.
하지만 JSON 데이터를 수동으로 처리해야 하며, 추가적인 설정이 필요할 수 있다.

// GET 요청 예시
fetch('https://api.example.com/data')
  .then(response => response.json())  // JSON으로 변환 필요
  .then(data => console.log(data))
  .catch(error => console.error('에러 발생:', error));

Soooooo

설치 여부: Fetch는 내장 API이기 때문에 설치가 필요 없지만, Axios는 라이브러리를 설치해야 한다.
데이터 처리: Fetch는 JSON으로 변환하는 과정이 필요하고, Axios는 자동으로 데이터를 JSON으로 처리해준다.
추가 기능: Axios는 요청/응답 인터셉터, 자동화된 요청 취소, 기본 설정 옵션을 더 잘 지원

*TIL2) 장단점 분석

그래서 난,

Axios와 Fetch 모두 각기 다른 장점을 가지고 있어 상황에 따라 선택할 수 있지만, 개인적으로 Axios는 더 간편하고 기능이 많아 복잡한 프로젝트에서 유용하게 사용했던것 같다....응,,,아마도,,,
특히, 인터셉터 기능과 자동화된 JSON 처리는 코드를 더욱 간결하고 관리하기 쉽게 만들어 주었다. 반면에 Fetch는 라이브러리를 추가할 필요가 없고, 단순한 요청을 처리할 때는 더 가볍게 사용할 수 있었다!!!!