[React Native] 노마드 코더 React Native 무료 강의 내용 정리 #2 Weather App

* 자막 없이 영어로 들어서 중간중간 영어가 많이 섞여있을 수 있음.

 

 

#2.0 Snack

https://snack.expo.dev/

Snack - React Native in the browser

웹 페이지에서 react native 코드도 치고, 바로 옆에 에뮬레이터로 결과도 보여줌. 

QR코드 찍어서 개인 핸드폰으로도 바로 볼 수 있음.

 

군대, 폰이 없는 경우 등 다양한 환경에서 웹 브라우저만 접속이 가능하면 들어가기 가능.

 

#2.1 The Rules of Native

- RN은 웹사이트, html이 아니라 div, span등이 존재하지 않음. -> 그 대신 'View'를 사용함. 항상 View를 import해야함.

- 모든 텍스트는 <Text></Text> component 안에 들어가야함.

- 컴포넌트에 style을 적용할 수 있음. 그러나 CSS랑은 다른 속성들이 많음.

- StyleSheet.create({}) 없이도 스타일을 적용할 수 있으나, 있는게 훨씬 편함.

- StatusBar 컴포넌트는 상단 시계, 배터리를 표시하는 컴포넌트임. 

  react native에서 import되지 않고 '3rd party package'에서 import됨.

  위 상단표시바(?)를 보여주는 rn의 방식임 -> 이런 식으로 OS랑 대화함.

 

 

#2.2 React Native Packages

https://reactnative.dev/

React Native · Learn once, write anywhere

 

- Components 페이지로 가보면 Core components가 많지 않음. 과거엔 많았는데 지금은 많이 줄었음.

- React Native started trying to give developers as many APIs and components as possible, but then they realized it was very hard to maintain and update. So they chose to reduce the amount of APIs and components.

 

#2.3 Third Party Packages

컴포넌트와 API의 차이

- 컴포넌트 : 화면에 렌더할 것들, return 안에 렌더 할 것,  ex) View

- API : OS랑 소통하는 js 코드.

 

https://reactnative.directory/

- all the 3rd party API, packages made by the community

- 전에는 모든 api를 RN에서 만들었으나 이젠 다른 커뮤니티들이 개발.

- RN이 패키지와 api를 만들기 시작함, 'Expo SDK' 라 불림.

- 그래서 "react-native", "expo" statusBar 둘 다 존재, 엑스포가 rn에서 클론해와서 좀 더 발전시킴.

- 엑스포 sdk에 엄청 많은 패키지가 있음. 잘 쓰자!

 

 

#2.4 Layout System

'View' component.

- 디폴트 방향이 세로임. 웹에서는 가로. -> 가로 사이즈 넘어가도 웹처럼 자동으로 옆으로 스크롤 되지 않음.

- Layout을 width, height로 만들 경우는 거어어어의 없을거임. 폰마다 크기 차이가 있기 때문.

- 따라서 모든 폰에서 비슷하게 보일 수 있도록 만들거임. 특히 레이아웃은 더더욱!

 

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: "tomato" }}></View>
      <View style={{ flex: 1, backgroundColor: "teal" }}></View>
      <View style={{ flex: 1, backgroundColor: "orange" }}></View>
    </View>
  );
}

위와같이 다 flex : 1 먹이면 화면에서 균등하게 세 뷰가 나뉘어져서 나옴.

 

- 이렇게 보통 proportion으로 함. (직접적인 크기 숫자 등 x)

- flex를 담는 parent component에도 flex가 있어야함.

- 옆에 있는 View끼리 flex가 비율로 정해지는 것임. 하나라도 flex가 없으면 걔는 화면에 보여지지 않음.

- By default, all the flex containers have a flex direction of coloumn, vertical. -> 당연히 가로로 바꿀수도 있음.

 

 

#2.5 Styles

- justifyContent : "center" -> 세로로 가운데에 정렬

- alignItems : "center" -> 가로로 가운데에 정렬

 

 

#2.6 Styles part Two

- 브라우저에서와 달리 view들은 화면이 넘어가도 자동으로 스크롤 되지 않음.

- 따라서 ScrollView라는 컴포넌트를 써야함.

- scrollview의 스타일을 쓸 때 style을 쓰는게 아니라 contentContainerStyle을 써야함

- 화면의 사이즈를 알 수 있는 api : dimension

https://reactnative.dev/docs/dimensions

Dimensions · React Native

- ScrollView의 props

'pagingEnabled' - 하나의 뷰를 페이지처럼 보여줌

'showHorizontalScrollIndicator' - 스크롤바 보여줄지 여부

indicatorStyle - 스크롤바 색 설정          ** only for ios

 

 

#2.7 Location

 

중간에 나는 render error가 났었다. 요 글 참고하시길

https://bba-jin.tistory.com/47

[Error] React Native 'Render Error Minified React error #321; '

 

 

또 콘솔이 니꼬쌤처럼 뜨질 않아서 뭐지 ? 했는데 댓글을보니 아이폰은 모바일 이름을 영어로 바꾸면 정상적으로 뜬다고 한다.

설정 -> 일반 -> 정보 -> 이름

으로 가서 모바일명을 바꿔주면 된다. 

 

여기까지 코드 : 

https://github.com/rocher71/react-native-study/commit/2fdff4d048a2ba873315e88f4546e273157ae93f#diff-ce80ea84a0b83caf8f722908d59f7b48b7eaba8a998ceca9c11bbd88ea398fe7

#2.7 Weather App - Location · rocher71/react-native-study@2fdff4d

 

 

#1.8 Weather

- 이 사이트에서 날씨 API 가져옴.

- 실제 서비스에선 앱 코드 안에 api key를 넣으면 안됨, 내 서버에 넣고 클라이언트 앱에선 나한테 요청을 날려야함. 여기선 코드에 넣고 실행할 것.

 

 

#2.8 Recap

- Component가 mounting될 때 호출되는 함수인 getWeather()함수를 생성했음. 

- City, days, ok라는 state를 만듦.

- 사용자가 수락하면 좌표를 가져오고, 이후 reverseGeocodeAsync()를 사용해서 도시명을 가져옴.

- weather api 사이트에서 latitude, longitude를 넘겨줘서 날씨를 받아옴.

- api를 호출할 때 단위를 화씨->섭씨로 바꿔줌 (&units=metric)

- 아직 날씨를 받아오지 못 한 상태면 ActivityIndicator로 로딩화면을 보여줌

- 날씨를 받아온 후엔 map()함수로 배열의 각 요소를 ScrollView안에 넣어줌.

- toFixed()함수로 소수의 자리수를 정해줬음

parseFloat(123.5324).toFixed(1) ===> 123.5 

 

 

#2.9 Icons

- expo init으로 프로젝트를 생성하면 기본으로 '@expo/vector-icons'를 받아줌 -> 기본 아이콘들

- 이 링크에서 원하는 아이콘 찾을 수 있음

- 날씨 api에서 오는 날씨, 아이콘의 name 을 각각 key value값으로 갖는 hashmap을 만들어줌.

<Fontisto 
name={icons[day.weather[0].main]}
size={68}
color="white"
/>

위와 같이 아이콘의 props안에 변수를 사용해서 매칭해줄수 있음.

 

- size를 styles에 넣고 싶으면 아래 코드처럼 사용해야 함.

<Fontisto
name={icons[day.weather[0].main]}
style={styles.weatherIcon}
/>

const styles = StyleSheet.create({
  weatherIcon: {
    color: "white",
    fontSize: 68,
  },
});

jsx에서 그냥 size로 쓰던걸 fontSize로 바꿔줘야함.

 

** styles 여러가지 사용하는 방법

<View style={styles.day}>

<View style={{ ...styles.day, alignItems: "center" }}>

위의 코드를 아래와 같이 바꿔주면 여러가지 style 사용할 수 있음!