[React Native] 날씨 정보 띄우기

 

결과화면

- 노마드 코더, 니콜라스 님의 무료 RN 영상을 보고 좌우로 스크롤 되는 날씨 앱을 만들어보았다.

- 날씨 정보는 https://openweathermap.org/api 에서 가져왔다.

 

 

 

날씨 데이터 가져오기

-날씨 정보 가져오기

 const result = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
    );
    const json = await result.json();
    setData(json);

 

 

 

- 날씨 정보를 useState data에 저장해두고,

data안에 정보가 유무에 따라, 값을 표출해주거나 로딩창을 띄어주었다.

  {!data ? (
            <ActivityIndicator size="large" color="#00ff00" />
          ) : (
            <View style={styles.day}>
              <Text style={styles.temp}>
                {parseFloat(data?.main.temp).toFixed(1)}
              </Text>
              <Text style={styles.description}>{data?.weather[0].main}</Text>
              <Text style={styles.detail}>
                {data?.weather[0].description}
              </Text>
            </View>
          )}

 

 

Weather API 이용 제한

 

 

 

 

- 배운점:

• RN에서는 <div> 사용하지 않고, <View> 사용, 텍스트는 무조건 <Text> 안에 사용.
• RN은 화면 표출을 도와주는 인터페이스일 뿐이다. 브라우저를 랜더링 하는 게 아니다.
•  

  

  RN 작동 원리

Style 적용하기

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "tomato",
    },
    city: {
      flex: 1.2,
      justifyContent: "center",
      alignItems: "center",
    },
    })


//  이렇게 사용해도 된다. 하지만 auto-complete 사라짐. 그래서 전자를 사용 
const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
};

 

 

 

참고

 

https://nomadcoders.co/react-native-for-beginners/lobby?utm_source=free_course&utm_campaign=react-native-for-beginners&utm_medium=site 

왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders

https://openweathermap.org/api