왜 React Native 앱이 로컬 .NET API에 연결되지 못하는가 (그리고 해결 방법)

Source: Dev.to

문제: “Localhost”란 무엇인가?

React Native 코드 안에 localhost 를 입력하면, 그 코드는 모바일 기기(또는 에뮬레이터)에서 실행됩니다.

• 컴퓨터에서는 localhost 가 컴퓨터 자체를 가리킵니다.
• Android 에뮬레이터에서는 localhost 가 Android 기기의 내부 루프백 네트워크를 가리킵니다.

에뮬레이터는 존재하지 않는 .NET 서버를 찾으려 하므로 Network Error 가 발생합니다.

해결책: 마법의 IP 주소

iOS 시뮬레이터 (Mac)에서 테스트

Apple의 iOS 시뮬레이터는 호스트 머신의 네트워크를 공유합니다.

사용할 URL: http://localhost:/api/...

Android 에뮬레이터에서 테스트

Android 에뮬레이터는 격리된 가상 라우터에서 실행됩니다. Google은 호스트 머신에 접근하기 위한 특수 별칭 IP를 제공합니다.

사용할 URL: http://10.0.2.2:/api/...

실제 기기(iPhone 또는 Android)에서 Wi‑Fi를 통해 테스트

실제 폰에서는 localhost 도 10.0.2.2 도 동작하지 않습니다. 컴퓨터의 로컬 Wi‑Fi IP 주소를 사용하세요.

1. 터미널을 열고 ipconfig(Windows) 또는 ifconfig(macOS)를 실행합니다.
2. IPv4 주소를 찾습니다(예: 192.168.1.X 또는 10.0.0.X).

사용할 URL: http://192.168.1.X:/api/...

참고: .NET API가 localhost 만이 아니라 모든 인터페이스에서 수신하도록 설정했는지 확인하세요.
예시: dotnet run --urls "http://0.0.0.0:"

최선의 방법: 환경 설정

플랫폼마다 Axios URL을 수동으로 바꾸는 대신, 동적인 환경 변수를 구성합니다.

.env 파일 (Expo)

# 테스트 디바이스에 따라 이 값을 변경하세요!

# iOS Simulator
# EXPO_PUBLIC_API_URL=http://localhost:5257/api

# Android Emulator
EXPO_PUBLIC_API_URL=http://10.0.2.2:5257/api

# Physical Device
# EXPO_PUBLIC_API_URL=http://192.168.1.45:5257/api

Axios 인스턴스 (TypeScript)

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default api;

이제 .env 파일에서 해당 라인의 주석을 해제하고, npx expo start -c(캐시 삭제) 로 Expo 서버를 재시작하면 모든 디바이스에서 API가 정상적으로 연결됩니다.