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

학습일지/프론트엔드

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

zinyy 2024. 10. 10. 20:41

˚ UI 스타일링

˚ 위치 정보 가져오기

˚ 날씨 API 연동

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

˚ 아이콘 적용 및 스타일링

이번에는 날씨 정보를 화면에 표시하고, 로딩 상태를 처리하는 방법에 대해 다뤄볼 예정이에요☺️

이전에는 OpenWeatherMap API를 통해 날씨 데이터를 가져오는 방법에 대해 작성했었습니다. 이번에는 이 데이터를 UI에 표시하는 방법과, 데이터를 불러오는 동안 로딩 스피너를 사용하는 방법에 대해 작성해 보겠습니다.

1. 로딩 상태 처리하기 ⏳

먼저, 데이터를 가져오는 동안 사용자에게 로딩 중임을 시각적으로 표시하는 것이 중요합니다. 이를 위해 React Native의 ActivityIndicator 컴포넌트를 사용해 보겠습니다.

ActivityIndicator · React Native

Displays a circular loading indicator.

reactnative.dev

이 컴포넌트는 원형 로딩 스피너를 제공하며, 간단한 코드로 로딩 상태를 구현할 수 있어요.

데이터를 불러오는 동안 로딩 스피너를 표시하고, 데이터를 받아오면 날씨 정보를 화면에 표시하도록 구현해 볼게요.

<View style={styles.container}>
  <View style={styles.city}>
    <Text style={styles.cityName}>{city}</Text>  {/* 도시 이름 표시 */}
  </View>

  <ScrollView
    pagingEnabled
    horizontal
    showsHorizontalScrollIndicator={false}
    contentContainerStyle={styles.weather}
  >
    {/* 로딩 중일 때 */}
    {days.length === 0 ? (
      <View style={{ ...styles.day, alignItems: 'center' }}>
        <ActivityIndicator color="white" size="large" style={{ marginTop: 10 }} />  {/* 로딩 스피너 */}
      </View>
    ) : (
      <View style={styles.day}></View>
    )}
  </ScrollView>
</View>

days.length === 0 : 날씨 데이터를 아직 받아오지 못한 상태에서는 로딩 스피너를 표시합니다.
ActivityIndicator : 로딩 중일 때 원형 로딩 스피너를 화면에 표시해, 사용자가 데이터를 기다리고 있음을 시각적으로 알 수 있도록 합니다.

이 코드를 통해 날씨 데이터를 불러오는 동안 로딩 상태를 처리할 수 있습니다.

이제 데이터를 받아오면 날씨 정보를 화면에 표시하는 방법을 좀 더 구체적으로 작성해 볼게요👐

2. 날씨 정보 화면에 표시하기 🌤️

OpenWeatherMap API로 받아온 날씨 정보에는 날씨 상태, 온도, 날씨 설명 등이 포함되어 있습니다. 이 정보를 화면에 적절하게 표시하려면 각 날씨 데이터를 화면에 매핑하는 작업이 필요합니다.

먼저, 날씨 상태(main), 온도(temp), 그리고 상세 설명(description)을 화면에 표시하는 방법을 구현해 볼게요.

days.map((day, index) => (
  <View key={index} style={styles.day}>
    <Text>{day.weather[0].main}</Text>  {/* 날씨 상태 (예: 구름, 맑음 등) */}
    <Text>{day.weather[0].description}</Text>  {/* 날씨 설명 (예: "구름 많음") */}
    <Text>{day.main.temp}</Text>  {/* 현재 온도 */}
  </View>
))

days.map() : API로 받아온 날씨 데이터를 순회하며 각 날짜별로 날씨 정보를 화면에 표시합니다.
day.weather[0].main : 날씨 상태(예: "Clouds", "Clear" 등)를 나타내는 값입니다.
day.weather[0].description : 날씨 상태에 대한 상세 설명(예: "overcast clouds', "clear sky").
day.main.temp : 현재 온도를 나타내는 값입니다.

이제 화면에 날씨 상태와 온도 정보가 제대로 표시될 거예요!

하지만, 미국에서 사용하는 화씨온도로 데이터가 전달되기 때문에 섭씨로 변환해야 합니다.

이를 위해 API 요청 시 &units=metric을 추가해서 데이터를 받아오면, 온도를 섭씨로 변환할 수 있습니다.

const { list } = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_key}&units=metric`);

3. 온도 소수점 처리 및 스타일링 🖌️

온도를 더 깔끔하게 표시하기 위해, 온도를 소수점 한 자리까지만 표시하도록 코드를 수정할 수 있습니다.

또한, 온도와 날씨 상태를 스타일링해 더 보기 좋게 만들어보겠습니다.

days.map((day, index) => (
  <View key={index} style={styles.day}>
    <Text style={styles.temp}>{parseFloat(day.main.temp).toFixed(1)}°C</Text>  {/* 온도를 소수점 1자리로 표시 */}
    <Text style={styles.description}>{day.weather[0].main}</Text>  {/* 날씨 상태 */}
    <Text style={styles.tinyText}>{day.weather[0].description}</Text>  {/* 날씨 상세 설명 */}
  </View>
))

const styles = StyleSheet.create({
  day: {
    width: SCREEN_WIDTH,
    alignItems: 'flex-start',
    paddingHorizontal: 20,
  },
  temp: {
    marginTop: 50,
    fontSize: 100,
    fontWeight: '600',
    color: 'white',
  },
  description: {
    marginTop: -10,
    fontSize: 30,
    fontWeight: '500',
    color: 'white',
  },
  tinyText: {
    fontSize: 25,
    color: 'white',
  },
});

temp : 온도는 큰 글씨로 강조하고, 소수점 1자리까지 표시합니다.
description : 날씨 상태는 중간 크기로 표현해 온도와 차별화했습니다.
tinyText : 날씨 설명은 작은 글씨로 간결하게 표시합니다.

이렇게 스타일을 적용하면 날씨 정보가 더욱 깔끔하게 화면에 나타납니다.

온도는 섭씨로 변환되었고, 각 데이터가 사용자에게 보기 좋게 정렬되었습니다.

4. 특정 시간대의 날씨 데이터 필터링하기 ⏳

OpenWeatherMap API는 3시간마다 날씨 데이터를 제공하는데, 원하는 특정 시간대의 날씨만 받아오고 싶다면, filter를 사용해 데이터를 필터링할 수 있습니다. 예를 들어, 오전 3시의 데이터를 가져오려면 dt_txt 값을 이용해 데이터를 필터링할 수 있습니다.

const filteredList = list.filter(({ dt_txt }) =>
  dt_txt.endsWith('03:00:00')
);
setDays(filteredList);  // 필터링된 데이터를 상태에 저장

dt_txt : 날짜와 시간이 포함된 문자열입니다.
endsWith('03:00:00') : 오전 3시에 해당하는 데이터를 필터링합니다.

이렇게 필터링된 데이터만을 화면에 표시할 수 있어, 특정 시간대의 날씨 정보를 간편하게 확인할 수 있습니다.

코드를 정확하게 작성했다면 아래와 같은 화면을 볼 수 있을 거예요!

다음에는 날씨 상태에 맞는 아이콘을 적용하고, 날씨 앱을 마무리해 볼 예정입니다!