[React Native] Axios로 데이터 받아오기: Android의 localhost 문제

React Native를 사용하면서 Axios로 데이터 요청시 iOS에서는 정상적으로 데이터를 받아올 수 있었지만, Android에서는 network error 문제로 데이터를 받아오지 못하는 상황을 경험했다.

원인을 찾아보니, iOS 에뮬레이터는 localhost를 호스트 컴퓨터의 로컬 주소로 올바르게 인식하지만, Android 에뮬레이터는 그렇지 않다.

Android Developer 공식 문서에 따르면, Android 에뮬레이터에서 호스트 컴퓨터의 로컬 주소를 참조하려면 10.0.2.2 주소를 사용해야 한다.

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

export const usePostQuery = () => {
  const [postData, setPostData] = useState<any>();
  const url = http://localhost:3000/
    const getPost = async () => {
      try {
        const {data} = await axios.get(url, {
          headers: {
            Accept: 'application/json',
            'content-Type': 'application/json',
          },
        });
        console.log(data.data);
        setPostData(data.data);
      } catch (err) {
        const error = await err;
        console.log(error);
        return err;
      }
    };

  return {postData};
};

플랫폼별로 URL 설정을 바꾸는 방법을 적용

iOS 에서는 localhost를 인식하나 android에서는 localhost를 인식하지 못한다.

• 10.0.2.2 주소를 입력해야 localhost 처럼 동작한다.

• 플랫폼별 url 설정을 바꿔준다.

import {useEffect, useState} from 'react';
import axios from 'axios';
import {Platform} from 'react-native';

export const usePostQuery = () => {
  const [postData, setPostData] = useState<any>();
  const url = Platform.OS === 'android' ? 
        'http://10.0.2.2:3000' : 'http://localhost:3000';
  
    const getPost = async () => {
      try {
        const {data} = await axios.get(url, {
      				...
        })

  return {postData};
};

이렇게 플랫폼별로 URL을 다르게 설정하여 문제를 해결했다.

• 이 방법은 로컬에서 개발 중인 서버와의 통신에만 해당되며, 실제 배포된 서버와의 통신에는 해당되지 않는다.

React Native 개발 시 iOS와 Android의 차이점에 주의를 기울이며 개발하는 것이 중요하다는 것을 다시 한번 깨달았다.