React # _ HTTP 요청 보내기

임시 데이터베이스 연결 및 HTTP 요청 기본 플로우

 

프로그래밍을 하면서 API를 연결하는 작업은 익숙할 수 있지만, 가끔은 “GPT의 도움 없이 혼자 할 수 있을까?“라는 생각이 들 때가 있다. 기본적인 원리를 이해하고 직접 작성하는 것이 중요하다고 생각하기에, 간단한 HTTP Fetching의 흐름을 정리해 본다.

 

1. Fetch API 기본 이해

 

JavaScript의 fetch 메서드는 HTTP 요청을 보내고 Promise를 반환하는 함수이다. 기본적인 코드 구조는 아래와 같다:

fetch('http://example.com/api')

  .then((response) => {

    return response.json(); // JSON 형태로 변환

  })

  .then((data) => {

    console.log(data); // 데이터를 처리

  });

 

이 코드에서 fetch는 데이터를 받아오는 데 성공하면 .then을 통해 반환된 데이터를 처리한다. 하지만 이 방식은 무한 루프와 같은 문제가 발생하기 쉽다. React에서는 **useEffect**와 상태 관리를 통해 데이터를 더 체계적으로 처리할 필요가 있다.

 

2. React에서 Fetch API 사용하기

 

React에서는 useEffect와 상태 관리(useState)를 사용하여 데이터를 가져오고 로딩 상태를 관리할 수 있다. 아래는 간단한 예제이다:

 

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



function App() {

  const [availablePlaces, setAvailablePlaces] = useState([]); // 데이터 상태

  const [isLoading, setIsLoading] = useState(false); // 로딩 상태



  useEffect(() => {

    async function fetchPlaces() {

      try {

        setIsLoading(true); // 로딩 시작

        const response = await fetch('http://localhost:3000/places'); // API 호출

        const resData = await response.json(); // 응답 데이터 처리

        setAvailablePlaces(resData.places); // 상태 업데이트

      } catch (error) {

        console.error('데이터 가져오기 실패:', error);

      } finally {

        setIsLoading(false); // 로딩 종료

      }

    }



    fetchPlaces();

  }, []);



  return (

    <div>

      {isLoading ? (

        <p>로딩 중...</p>

      ) : (

        <ul>

          {availablePlaces.map((place, index) => (

            <li key={index}>{place.name}</li>

          ))}

        </ul>

      )}

    </div>

  );

}



export default App;

 

3. 중요한 포인트

1. async/await 활용:

useEffect 내부에서 async/await를 직접 사용할 수 없기 때문에, 별도의 비동기 함수를 선언하고 이를 호출하는 방식으로 처리한다.

2. 로딩 상태 관리:

isLoading 상태를 사용하여 로딩 중임을 사용자에게 알린다. 이를 통해 데이터가 없을 때와 로딩 중일 때의 화면을 명확히 구분할 수 있다.

3. 에러 핸들링:

try/catch 블록을 사용하여 데이터 요청 중 발생할 수 있는 에러를 처리한다. 이를 통해 안정적인 사용자 경험을 제공할 수 있다.

 

4. Axios와 Hook으로 확장하기

 

위의 Fetch 기본 구조는 React 개발의 기초이다. 이후에는 더 나은 코드 재사용성을 위해 Custom Hook이나 Axios 라이브러리를 활용하는 방법을 추천한다. 예를 들어, Axios를 사용하면 기본 URL 설정, 요청 중복 방지, 에러 처리 등을 더 간단히 구현할 수 있다.

 

5. 마무리

 

API 요청의 기본 원리를 이해하는 것은 중요하다. 단순히 코드를 복사-붙여넣기 하는 것이 아니라, 어떤 방식으로 데이터가 요청되고 응답되는지를 명확히 이해하면 더 나은 코드를 작성할 수 있다.