[RN] React-Native에서 HTTP 요청하기 위해 사용 되는 Axios

서론

이미 해당 관련 내용에 대해 React 에서 다뤄보았지만, React와 ReactNative는 같은 Node 기반으로 서버에 HTTP를 요청하는 방식 또한 크게 다른 부분이 없습니다.

다만, 사용 방법에 대해 조금 차이가 존재하여 다시 한번 다뤄보게 되었기에 간단하게 사용 예시 관련하여 보여줄 것이며, 해당 내용에 대해서는 이전에 작성하였던 글을 참고해주시면 감사하겠습니다.

 

React Native에서 Axios를 사용하는 것은 Axios가 의존하는 XMLHttpRequest API를 포함하여 많은 브라우저 API를 폴리필하는 React Native의 기능 덕분에 브라우저 환경이나 Node.js에서 사용하는 것과 대체로 유사합니다. 구문 및 API 메서드(예: get, post, put, delete)는 동일하게 유지되므로 다양한 환경에서 유사한 방식으로 HTTP 요청을 만들 수 있습니다.

 

사용 예

다음은 React Native 앱 내에서 Axios를 사용하여 'GET' 요청을 수행하는 간단한 예입니다.

import axios from 'axios';
import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const AxiosData = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
      	// 해당 데이터를 전달할 API URL 주소 뒤에 들어오는 부분은 GET으로 전달할 데이터들
	// 예시 ?파라미터 or /파라미터 해당 상황에 맞게 전달하시면 됩니다
        const response = await axios.get('ApiUrl/Parameter');
        // 전달 받은 메세지
        console.log(response.data);
      } catch (error) {
      	// 전달 받은 에러
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return (
    <View>
      <Text>Get 방식 예제 코드입니다.</Text>
    </View>
  );
};

export default AxiosData;

 

다음은 React Native 앱 내에서 Axios를 사용하여 'POST' 요청을 수행하는 간단한 예입니다.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import axios from 'axios';

const AxiosData = () => {
  const [postData, setPostData] = useState({
    title: '제목을 입력합니다.',
    content: '내용을 입력합니다.',
    userId: 1,
  });
  const [responseMessage, setResponseMessage] = useState('');

  const handleSubmit = async () => {
    try {
      // 해당 데이터를 전달할 API URL 주소
      const url = URL;
      const response = await axios.post(url, postData);
      console.error(response.data);
      // API 응답에 생성된 객체가 포함되어 있다고 가정하고 생성해준 responseMessage에 해당 데이터를 담습니다.
      setResponseMessage(response.data.message);
      
    } catch (error) {
      console.error(error);
      setResponseMessage('게시물을 작성하지 못했습니다.');
    }
  };

  return (
    <View>
      // Api로 호출하여 받아온 데이터를 불러와줍니다.
      <Text>{responseMessage}</Text>
      // Api를 호출하기 위해 특정 이벤트로 버튼을 만들어줍니다.
      <Button title="Submit Post" onPress={handleSubmit} />
    </View>
  );
};

export default AxiosData;

 

Axios에 대해 참고 내용

[React] Axios를 왜 써야하며, 사용하여 HTTP 요청 하기