[React Native] 지역 날씨 어플 만들기 1부 (NomadCoder RN)

[React Native] 지역 날씨 어플 만들기 1부 (NomadCoder RN)

 

오늘은 NomadCoder의 무료 강의 React Native 강의를 보며 weather app 을 만들어 보았다.

 

지역 날씨 어플 개요

지역 날씨 어플의 레이아웃은 상단부에 지역이름 (location) 을, 3시간 간격의 어플의 중단~하단 부분을 온도(temp) 와 태풍, 천둥번개, 비, 화창함 등과 같은 날씨 (description) 정보들을 보여주고 있다.

 

지역 날씨 어플의 최종 화면은 다음과 같다.

 

이 지역 날씨 어플을 만들기 위한 코드를 리뷰하려 한다.

 

코드 리뷰 1 : 레이아웃 만들기

전반적인 컴포넌트들은 전체적인 화면 부모 View 안에 지역 이름 View 와 날씨정보 View 로 나눌 수 있다.

import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.city}>
        <Text style={styles.cityName}>Seoul</Text>
      </View>
      <View style={styles.weather}>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>sunny</Text>
        </View>
      </View>
    </View>
  );
}

 

아래는 각 View와 Text 에 대한 style 정보이다. 모든 정보들은 가운데 정렬을 위해 alignItems : "center" 를 주었다. 그리고 지역 View와 날씨 View의 flex size 비율은 1.2 : 3으로 두었다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "orange",
  },
  city: {
    flex: 1.2,
    justifyContent: "center",
    alignItems: "center",
  },
  cityName: {
    fontSize: 68,
    fontWeight: "500",
  },
  weather: {
    flex: 3,
  },
  day: {
    flex: 1,
    alignItems: "center",
  },
  temp: {
    marginTop: 50,
    fontSize: 178,
  },
  description: {
    marginTop: -30,
    fontSize: 60,
  },
});

 

코드 리뷰 2 : ScrollView, Dimensions 으로 날씨 페이징 만들기

아래 코드와 같이 시간대별 날씨 정보를 받아온다면 동일한 날씨 View가 반복적으로 나올 것이다. 이 다중 날씨 정보들은 나중에 map으로 처리한다고 해도 세로로 정렬될 여러 개의 날씨 ScrollView를 통해서 가로 scroll로 정렬한다. 

 

scollView 의 다양한 속성과 정보에 대해서는 이 링크를 참고할 수 있다 ( https://reactnative.dev/docs/scrollview )

ScrollView · React Native

 

우리가 사용한 속성은 다음과 같다. 

• contentContainerStyle : ScorllView에선 style을 사용하는 대신 contentCotainerStyle을 사용하여 스타일을 준다.
• horizontal : ScrollView를 가로 스크롤로 설정한다.
• pagingEnabled : paging 설정한다.
• showsHorizontalScrollIndicator : true/false 를 통해서 scroll바를 숨기고 보이게 할 수 있다.

    <ScrollView
        pagingEnabled
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.weather}
    >
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>sunny</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>sunny</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>sunny</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>sunny</Text>
        </View>
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>sunny</Text>
        </View>
      </ScrollView>
    </View>
  );
}

 

Dimensions 은 사용자 화면의 width와 height를 가져올 수 있는 RN이 제공하는 api 이다.

 

참고 : https://reactnative.dev/docs/dimensions

Dimensions · React Native

 

import { StyleSheet, Text, View, ScrollView, Dimensions } from "react-native";

const { width: SCREEN_WIDTH } = Dimensions.get("window");

						...

const styles = StyleSheet.create({

						...

    day: {
    	width: SCREEN_WIDTH,
    	alignItems: "center",
    },
    
						...

}

 

다음 게시물은 api 들을 활용하여 실제 나의 지역 정보와 날씨 정보들을 받아와서 활용할 것이다.

⚠️ 이 게시물의 모든 자료의 출처와 저작권은 노마드코더 강의에 있습니다. ⚠️

 

---

<참고> 해당 단계별 Github

1) 레이아웃 https://github.com/hoyeol0513/react_native_practice_nomad_weather/commit/599db65d64a8cebda03875eba6f179ee7620f94b

City, Weather component setting · hoyeol0513/react_native_practice_nomad_weather@599db65

 

2) ScrollView, Dimensions 로 날씨 paging 

https://github.com/hoyeol0513/react_native_practice_nomad_weather/commit/09579be9ae58a3f925dcb97a5e2e27350bc4c6e8

Weather scrollView, paging setting · hoyeol0513/react_native_practice_nomad_weather@09579be