[React] fetch 로 통신하기

React에서 fetch는 JavaScript의 내장 API인 fetch() 함수를 사용하여 서버와 데이터 통신을 수행하는 방법이다. 

fetch 함수는 ES6부터 기본적으로 제공되는 함수이며, React 애플리케이션에서 AJAX 요청을 보낼 때 많이 사용된다.

AJAX 란?

AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하기 위한 기술입니다. AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 서버로부터 데이터를 가져오거나 서버에 데이터를 보낼 수 있습니다.
기존에는 웹 페이지에서 사용자의 요청에 따라 새로운 페이지를 서버로부터 전체적으로 다시 받아오는 방식인 전통적인 동기적인 요청 방식이 일반적이었습니다. 하지만 AJAX의 등장으로 비동기적인 요청이 가능해졌으며, 이를 통해 웹 페이지의 사용자 경험을 향상시킬 수 있게 되었습니다.
AJAX 요청은 JavaScript를 사용하여 비동기적으로 서버에 HTTP 요청을 보내고, 서버로부터 데이터를 받아옵니다. 이때 XML을 사용할 수도 있지만, 최근에는 JSON이 주로 사용되며, XML 대신 JSON을 받아오는 경우를 JSON 요청이라고도 합니다.
AJAX 요청은 XMLHttpRequest 객체를 사용하여 수행할 수도 있지만, fetch() 함수와 같은 더 간편한 API를 사용하는 것이 일반적입니다. AJAX 요청은 사용자 입력에 대한 실시간 응답, 동적으로 데이터를 로드하여 페이지를 업데이트, 백그라운드에서 서버와 데이터를 주고받는 등 다양한 기능을 구현하는 데 사용됩니다.

fetch 함수는 네트워크 요청을 비동기적으로 보내고 응답을 처리하는 Promise를 반환한다.

fetch 함수는 서버로 HTTP 요청을 보내고 응답을 받을 수 있으며, 

JSON 데이터, 텍스트, 또는 바이너리 데이터를 요청 및 응답으로 처리할 수 있다. 

 

주로 RESTful API와 통신하는 데 사용되며, 서버로부터 데이터를 가져오거나 서버에 데이터를 전송하는 데 사용된다.

 

GET 요청

fetch 함수를 사용할 때 method를 별도로 지정하지 않으면 기본적으로 GET 요청을 보낸다.

예를 들어, 다음과 같이 fetch 함수를 호출하면 GET 요청이 전송된다.

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

만약 다른 HTTP 메서드(POST, PUT, DELETE 등)로 요청을 보내려면 

fetch 함수의 options 매개변수를 사용하여 요청을 구성해야 한다. 

options 매개변수에 method 속성을 설정하여 원하는 HTTP 메서드를 지정할 수 있다.

 

예를들어 

{
  "data": [
    {
      "x": "2023-05-13",
      "y": "20"
    },
    {
      "x": "2023-05-14",
      "y": "15"
    },
    {
      "x": "2023-05-15",
      "y": "20"
    },
    {
      "x": "2023-05-16",
      "y": "18"
    },
    {
      "x": "2023-05-17",
      "y": "20"
    },
    {
      "x": "2023-05-18",
      "y": "17"
    },
    {
      "x": "2023-05-19",
      "y": "13"
    }
  ]
}

이런 형태의 데이터를 GET 방식으로 받아온다고 해보자

const [chatData, setChatData] = useState([]);


useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(
                    `${rootUrl}/admin/dashboard/lastweek`
                );
                const json = await response.json();
                setChatData(json.data);
            } catch (error) {
                console.log("Error :", error);
            }
        };
        fetchData();
    }, []);

위처럼 불러와서 chatData의 형태로 사용할 수 있다.

chatData 를 콘솔에 출력해보면 다음과 같다

POST 요청

예를 들어, POST 요청을 보내려면 다음과 같이 작성할 수 있다.

const data = {
  username: 'john',
  password: 'secret'
};

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

위의 코드에서 method: 'POST'를 설정하여 POST 요청을 보내고 있다.

body 속성을 사용하여 요청의 본문을 설정하고, headers 속성을 사용하여 요청 헤더를 설정할 수 있다.

HTTP 헤더 설정하기

const headers = {
  Authorization: 'Bearer your_token',
  'Content-Type': 'application/json'
};

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

fetch() 함수의 두번째 인자로 옵션 객체를 전달해서

요청 메서드, 헤더, 요청 본문 등을 설정할 수 있다.

 

참고

fetch 는 기본적으로 CORS 정책을 따른다

따라서 크로스 도메인 요청을 보낼 때 서버에서 CORS 헤더를 올바르게 설정해야한다.