[React Native] 날씨 앱 만들기(2) feat. Nomad Coader

˚ UI 스타일링

˚ 위치 정보 가져오기

˚ 날씨 API 연동

˚ 날씨 정보 표시 및 로딩 처리

˚ 아이콘 적용 및 스타일링

---

날씨 앱에서는 사용자의 위치에 따라 날씨 데이터를 다르게 보여주기 때문에 사용자의 현재 위치를 기반으로 날씨 정보를 받아와야 합니다.

그래서 이번에는 UI 스타일링에 이어서 사용자 위치 정보를 가져오는 방법에 대해 다뤄보려고 해요😊

---

1. Expo Location 라이브러리 설치 📍

React Native에서는 사용자의 위치 정보를 얻기 위해 Expo Location 라이브러리를 사용할 수 있어요.

Location

이 라이브러리는 사용자의 현재 위치, 위도, 경도, 등의 정보를 쉽게 가져올 수 있는 API를 제공합니다.

 

먼저, 아래 명령어로 Expo Location을 설치해 주세요.

npx expo install expo-location

 

설치가 완료되면, 이제 이 라이브러리를 통해 위치 권한을 요청하고, 사용자 위치 정보를 가져오는 코드를 작성해 볼 거예요!

---

2. 사용자 위치 권한 요청 🔑

사용자의 위치 정보를 얻기 전에, 먼저 위치 사용 권한을 요청해야 합니다.

여기서 사용하는 API는 requestForegroundPermissionAsync() 인데요, 이 API는 앱이 실행 중일 때 위치 정보를 요청하도록 해줍니다.

 

아래와 같은 코드를 통해 사용자의 위치 권한을 요청할 수 있습니다.

const [ok, setOk] = useState(true);

const getWeather = async () => {
  const permission = await Location.requestForegroundPermissionAsync();
  console.log(permission);
};

useEffect(() => {
  getWeather();
}, []);

위 코드를 실행하면 앱이 사용자에게 위치 사용 권한을 요청하게 됩니다.

사용자가 허가를 하면, 아래와 같은 정보가 콘솔에 출력됩니다.

{
  "canAskAgain": true,
  "expires": "never",
  "granted": true,
  "status": "granted"
}

여기서 granted: true는 사용자가 위치 권한을 허가했다는 뜻이에요.

만약 권한을 받지 못하면, 이를 상태로 관리해 UI에 반영할 수 있어요. 예를 들어, 아래 코드처럼 위치 권한을 거부한 경우를 처리할 수 있습니다.

const getWeather = async () => {
  const { granted } = await Location.requestForegroundPermissionAsync();
  if (!granted) {
    setOk(false); // 권한 거부 시 UI 변경
  }
};

 

 

3. Foreground와 Background 위치 권한 차이점 🌐

참고로 requestForegroundPermissionAsync() 는 앱이 실행 중일 때만 위치 정보를 사용하는 Foreground 권한을 요청하는 방법이에요.

만약 앱이 백그라운드에서 실행될 때도 위치 추적이 필요하다면, requestBackgroundPermissionAsync() 를 사용해야 해요.

 

하지만 백그라운드 권한은 사용자 프라이버시와 배터리 소모에 큰 영향을 줄 수 있기 때문에 꼭 필요한 경우에만 사용하는 것이 좋을 거예요😉

---

4. 현재 위치 정보 가져오기 🗺️

위치 권한을 허가받았으니, 이제 사용자의 현재 위치를 가져올 차례입니다.

이를 위해 getCurrentPositionAsync() API를 사용할 수 있어요. 이 API는 사용자의 위도와 경도 등의 정보를 제공해 줍니다.

const getWeather = async () => {
  const { granted } = await Location.requestForegroundPermissionAsync();
  if (!granted) {
    setOk(false); // 권한 거부 시 처리
    return;
  }

  // 사용자 위치 정보 가져오기
  const location = await Location.getCurrentPositionAsync({ accuracy: 5 });
  console.log(location);
};

useEffect(() => {
  getWeather();
}, []);

• 여기서 accuracy 옵션을 통해 위치 정보의 정확도를 설정할 수 있어요. 값이 높을수록 더 정확한 위치를 가져오지만, 속도가 느려질 수 있습니다.

이 코드를 실행하면 콘솔에 위치 정보가 출력되는데, coords 라는 객체 안에 위도(latitude), 경도 (longitude), 고도(altitude) 등의 정보가 담겨 있어요.

우리가 필요한 값은 위도와 경도입니다!

---

5. 위도와 경도 정보로 도시 이름 가져오기 🌆

이제 위도와 경도만으로는 사용자가 있는 도시를 알 수 없으니, 이를 바탕으로 도시 이름을 가져와야 해요.

이때 사용하는 API는 reverseGeocodeAsync() 입니다.

이 API는 위도와 경도를 입력받아, 해당 좌표의 도시 이름이나 구역 등의 상세 위치 정보를 반환해 줍니다.

const [city, setCity] = useState('Loading...');

const getWeather = async () => {
  const { granted } = await Location.requestForegroundPermissionAsync();
  if (!granted) {
    setOk(false); // 권한 거부 시 처리
    return;
  }

  // 사용자 위치 정보 가져오기
  const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync({ accuracy: 5 });

  // 위도와 경도를 이용해 도시 정보 가져오기
  const location = await Location.reverseGeocodeAsync({ latitude, longitude }, { useGoogleMaps: false });
  setCity(location[0].city); // 가져온 도시 이름을 상태에 저장
};

useEffect(() => {
  getWeather();
}, []);

이 코드를 실행하면 사용자의 도시 이름이 city 라는 상태에 저장됩니다.

이제 도시 이름을 기반으로 날씨 정보를 가져오고, 이를 UI에 표시할 수 있어요 😎

---

6. 사용자 위치 기반 UI 반영하기 🎨

이제 도시 이름이 성공적으로 받아졌으니, 이를 UI에 반영해 볼 차례입니다.

앞서 만든 UI 코드에서 고정된 도시 이름(Seoul)을 실시간으로 받아온 도시 이름으로 변경해 볼게요.

<View style={styles.container}>
  <View style={styles.city}>
    <Text style={styles.cityName}>{city}</Text> {/* 고정된 'Seoul' 대신 city로 변경 */}
  </View>
  <ScrollView
    pagingEnabled
    horizontal
    showsHorizontalScrollIndicator={false}
    contentContainerStyle={styles.weather}
  >
    <View styles={styles.day}></View>
    <View styles={styles.day}></View>
    <View styles={styles.day}></View>
    <View styles={styles.day}></View>
  </ScrollView>
</View>

이렇게 하면 사용자의 현재 위치를 기반으로 동적인 도시 이름을 화면에 표시할 수 있어요 🎉

---

다음 포스팅에서는 이 위치 정보를 기반으로 날씨 API를 연동해 실시간 날씨 정보를 받아오는 방법을 알아볼 예정입니다 !