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

˚ UI 스타일링

˚ 위치 정보 가져오기

˚ 날씨 API 연동

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

˚ 아이콘 적용 및 스타일링

---

먼저, 날씨 앱을 만드는 첫 번째 단계, UI 스타일링부터 정리하려고 해요😊

이 날씨 앱은 현재 위치를 기반으로 16일 간의 기상 예보를 보여줄 계획인데요, 예보를 날짜별로 수평 스크롤 방식으로 구현할 예정입니다.

 

이 포스팅에서는 ScrollView를 활용해 날씨 데이터를 스크롤할 수 있는 UI 구성 방법에 대해 다뤄볼게요.

---

1. ScrollView란? 📜

ScrollView는 React Native에서 화면에 다 담기지 않는 콘텐츠를 스크롤할 수 있게 해주는 컴포넌트에요.

웹에서는 기본적으로 스크롤이 가능하지만, 모바일 앱에서는 ScrollView를 사용해야 스크롤이 가능해집니다.

ScrollView · React Native

 

먼저, 날씨 정보를 수평으로 스크롤할 수 있도록 ScrollView를 설정해 보겠습니다.

<ScrollView horizontal pagingEnabled showsHorizontalIndicator={false}>
	<View />
	<View />
	<View />
	<View />
</ScrollView>

 

ScrollView 주요 속성 💡

• horizontal : 스크롤 방향을 가로로 설정
• pagingEnabled : 한 화면에 하나의 날씨 정보만 보이도록 페이지 전환 효과 제공
• showsHorizontalScrollIndicator={false} : 스크롤바를 숨김

이렇게 설정하면, 페이지를 넘기듯 스크롤할 수 있는 기능이 구현됩니다 👌

참고로, 수직 스크롤이 필요할 때는 showsVerticalScrollIndicator 속성을 사용할 수 있어요 !

 

2. 스크롤할 때 주의할 점 ⚠️

• ScrollView 스타일 : ScrollView에 스타일을 적용할 때는 style prop이 아닌 contentContainerStyle prop을 사용해야 해요.
• flex 설정 : ScrollView에는 flex 설정을 하지 않는 것이 좋아요. flex를 사용하면 스크롤이 제대로 작동하지 않을 수 있습니다.

---

3. 스크린 크기에 맞춘 View 구성 📏

날씨 데이터를 날짜별로 보여줄 때, 각 날짜의 정보가 하나의 화면을 꽉 채우도록 만들고 싶다면 화면의 크기를 기준으로 각 View의 너비를 설정해 주어야 합니다.

이때 Dimensions API를 사용해 화면 너비를 동적으로 가져올 수 있어요😎

Dimensions · React Native

 

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;

이 코드를 사용해 현재 화면의 너비를 가져오고, 각 날짜를 표시할 View의 너비로 설정합니다.

이렇게 하면 다양한 화면 크기에서도 각 날짜의 날씨 정보가 균일하게 화면을 차지할 수 있어요.

const styles = StyleSheet.create({
  day: {
    width: windowWidth,
    alignItems: 'flex-start',
    paddingHorizontal: 20,
  },
});

---

4. UI 스타일링 전체 코드 🛠️

아래는 ScrollView를 이용해 수평 스크롤을 구현하고, 화면 크기에 맞춰 UI를 구성한 전체 코드예요.

<View style={styles.container}>
    <View style={styles.city}>
        <Text style={styles.cityName}>Seoul</Text>
    </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>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'tomato',
    color: '#ffffff',
  },
  city: {
    flex: 1.2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cityName: {
    fontSize: 68,
    fontWeight: '500',
    color: 'white',
  },
  weather: {
    paddingLeft: '10',
  },
  day: {
    width: windowWidth,
    alignItems: 'flex-start',
    paddingHorizontal: 20,
  },
});

 

 

여기까지 완료했다면 아래 사진처럼 화면이 나타날거에요😊

 

---

다음 포스팅에서는 사용자 위치 정보를 가져오는 방법에 대해 정리해볼 예정입니다 !