반응형
안녕하세요. PSYda 입니다.
Nomad Coders의 React Native로 날씨앱 만들기 과정을 통해 학습한 내용을 정리중입니다.
여기 사이트를 통해 무료 교육과 필요시 유료 교육을 들으실 수 있고, 강사님이 개발자들에 필요한 유용한 정보들을 Youtube에도 올려주시니 구독하시고 자주 들으시면 도움이 될 것 같습니다.
이번 포스팅에서 알아볼 내용은 아래와 같습니다.
- Layouts with flexbox in React Native
- Loading screen
- Getting the location
- Getting the weather
1.Layouts with flexbox in React Native
- React Native에서는 flex를 이용해 layout 하는 것을 추천!
- Default flexDirection는 컬럼!
- 변경하고 싶으면 flexDirection:"row" 입력!
1.1 flex를 통해 layout 하기!
- 부모 요소에서 flex를 설정
- 자식 요소에서 분할할 비율을 설정
- 만약 2개의 자식이 있을 때
- 각각 flex:1 로 설정하면 50% 씩 분할함
- 각각 flex:1 과 flex:2를 주면 1/3 , 2/3 영역을 분할함
- 예시(50% 분할)
//View Container 설정
;<View style={styles.container}>
<View style={styles.yellowView} />
<View style={styles.blueView} />
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
},
yellowView: {
flex: 1,
backgroundColor: "yellow",
},
blueView: {
flex: 1,
backgroundColor: "blue",
},
})- 결과
- 예시2(1/3 , 2/3 분할)
yellowView: {
flex:1,
backgroundColor:"yellow"
},
blueView: {
flex:2,
backgroundColor:"blue"
}- 결과
2.Loading screen
최초 Loading 화면을 만든다.
2.1 첫번째 Loading 화면 만들기
- loading.js 컴포넌트 생성
import React from "react"
import { StyleSheet, Text, View } from "react-native"
export default function Loading() {
return
;<View style={styles.container}>
<Text style={styles.text}>Getting the fucking weather</Text>
</View>
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-end",
paddingHorizontal: 30,
paddingVertical: 100,
backgroundColor: "#FDF6AA",
},
text: {
color: "#2c2c2c",
fontSize: 30,
},
})- App.js 에서 Loading 컴포넌트 불러오기
import React from "react"
import Loading from "./Loading"
export default function App() {
return <Loading />
}- 결과
3.Getting the location
만약 App에 위치 정보를 사용하고 싶을 때 react native와 expo에서 제공하는 API를 사용 할 수 있다.
링크된 페이지를 참고하면 expo의 location이 더 많고 유용한 라이브러리를 제공하는 것을 알 수 있다(ex.Geofencing : 사용자가 특정 지역에 들어올 때 특정 함수를 호출하는 기능).
따라서 본 포스팅에서는 expo의 location을 이용하며, 사용하기 위해서는 라이브러리 설치가 필요하다.
3.1 Expo의 location library 설치
- 터미널에서 expo install expo-location 입력
expo install expo-location- 결과
3.2 location library import
- location을 사용할 파일에서 import
- App.js에 아래와 같이 입력
import * as Location from "expo-location"3.3 location library 사용
- 권한정보가져오기
- 비동기식(async await) 방법 사용
- requestPermissionsAsync() 함수 사용
- try ~ catch 구문을 이용해 에러 발생시 alert 발생
- 위치 정보 가져 오기
- 비동기식(async await) 방법 사용
- componentDidMount()를 이용해 컴포넌트 생성이 완료되었을 때 getLocation을 실행
- 위치는 getCurrentPositionAsync() 함수를 이용
- state를 이용해 Loading완료시 Loading 컴포넌트 해제
- 코드
//App.js
export default class App extends React.Component {
state = {
isLoading: true,
}
getLocation = async () => {
try {
await Location.requestPermissionsAsync()
const {
coords: { latitude, longitude },
} = await Location.getCurrentPositionAsync()
this.setState({ isLoading: false })
} catch (error) {
Alert.alert("Can't find you.", "So sad")
}
}
componentDidMount() {
this.getLocation()
}
render() {
const { isLoading } = this.state
return isLoading ? <Loading /> : null
}
}4 Getting the weather
4.1 API KEY 생성
- 사용할 API : openweathermap.org
- 위의 사이트에서 회원가입 및 로그인 하고, API key를 생성한다.
- 생성한 API key를 복사하여 app.js에 API_KEY 변수로 저장한다.
- 코드
//App.js
const API_KEY = "478d7b0a018~~~~"4.2 axios를 이용한 데이터 가져오기
- axios 설치 및 import
- yarn add axios를 이용해 axios 설치
yarn add axios- **import axios from "axios"**;- axios.get을 이용해 weather 정보 얻기
- 인자로 latitude, longitude, API_KEY를 전달
- 코드
//App.js의 App Component
getWeather = async (latitude, longitude) => {
const { data } = await axios.get(
`http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&APPID=${API_KEY}`
)
console.log(data)
}4.3 최종 App.js
import React from "react"
import { Alert } from "react-native"
import Loading from "./Loading"
import * as Location from "expo-location"
import axios from "axios"
const API_KEY = "478d7b0a01822840e15f70ddfa48c723"
export default class App extends React.Component {
state = {
isLoading: true,
}
getWeather = async (latitude, longitude) => {
const { data } = await axios.get(
`http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&APPID=${API_KEY}`
)
console.log(data)
}
getLocation = async () => {
try {
await Location.requestPermissionsAsync()
const {
coords: { latitude, longitude },
} = await Location.getCurrentPositionAsync()
this.getWeather(latitude, longitude)
this.setState({ isLoading: false })
} catch (error) {
Alert.alert("Can't find you.", "So sad")
}
}
componentDidMount() {
this.getLocation()
}
render() {
const { isLoading } = this.state
return isLoading ? <Loading /> : null
}
}이번 포스팅은 여기서 마치겠습니다.
감사합니다.
반응형
'Mobile Dev > React Native' 카테고리의 다른 글
| [ReactNative]0.개요 (0) | 2021.03.15 |
|---|
