[왕초보를 위한 React Native 101] Weather App

react native는 웹사이트가 아니기 때문에 html X -> div 쓸 수 없다

View는 container ->div 대신 View를 사용하기 때문에 항상 import 해줘야 한다

 

react native에 있는 모든 text는 text component에 들어가야 한다

<Text>Hello! I'm jisoo~~</Text>

 

스타일 적용 시 웹에서 사용하던 모든 것을 사용할 수는 없다

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

↑ StyleSheet.create는 object를 생성하는 데 사용

 

<View
      style={{
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      }}
    >

Styles object가 꼭 필요하진 않다

 

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
};

이렇게도 가능하지만 자동완성 기능 제공 X -> Styles.create 사용

 

status-bar component는 시계, 배터리, Wi-Fi를 의미한다

이런 것처럼 일부 component는 화면에 표시되지 않는다 -> iOS와 Android 운영체제와 소통하기 위한 것

 

AsyncStorage는 React Native를 위한 local storage

React Native가 개발자들에게 많은 API들과 Components를 제공하려 했지만 유지 관리와 업데이트가 어렵다

-> 예전에 제공했던 서비스 규모를 줄였다

 

Component는 화면에 렌더링할 항목(return 안에 있는 것)

ex) View, StatusBar

 

API는 자바스크립트 코드

ex) Vibration

 

Expo SDK -> Expo 팀이 자체적으로 만든 Packages와 APIs

 

레이아웃 만들려면 Flexbox 사용 -> 웹에서와 거의 같은 방식

기본적으로 모든 View는 Flex Container

Flex Direction 기본값은 모두 Column

** 웹에서는 Flex Direction의 기본값은 Row

 

Overflow가 있다고 해서 스크롤할 수 있다는 의미는 아니다

수많은 스크린에서 동일한 방식으로 보이는 레이아웃을 만드는 것에 대해 생각할 필요가 있다

-> 레이아웃에서는 width와 height 사용 X

 

React Native에서는 숫자만 생각하면 된다 -> 비율로 표현

<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>

3개의 View가 크기를 동일하게 조절

 Flex 부모를 만들고 자식을 원하는 비율로 조정 가능

 

 

Component를 없앴다고 해서 StatusBar가 사라지진 않는다

Component는 단지 운영체제를 구성할 수 있는 방법일 뿐

 

ScrollView는 내부에 컴포넌트와 뷰들을 자식으로 담을 수 있는 화면의 스크롤을 이용할 때 쓰는 컴포넌트

horizontal을 prop으로 넣어주면 좌우로 스크롤

ScrollView의 style을 만들고 싶으면 style prop을 쓰면 안 되고 Container Style을 사용해야 한다

<ScrollView horizontal contentContainerStyle={styles.weather}>

ScrollView에는 Flex 사이즈를 줄 필요 X

pagingEnabled는 스크롤을 자유롭지 못하게 한다

showsHorizontalScrollIndicator은 scroll indicator를 숨긴다

indicatorStyle을 주면 scroll indicator 디자인 가능 -> iOS에서만 작동

persistentScrollbar는 scroll bar가 투명해지지 않도록 해준다 -> 안드로이드에서만 가능

 

expo 실행하고 핸드폰 흔들면 element inspector 확인 가능

 

Dimensions를 사용하면 화면 크기를 얻을 수 있다

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

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

 

유저의 위치 가져오기

expo install expo-location

 

Geo Location 사용

현재 위치 얻을 수도 있고 위치 관찰, geocode도 가능(주소를 받아 위도, 경도 반환)

const [city, setCity] = useState("Loading...");
const [ok, setOk] = useState(true);
const ask = async () => {
  const { granted } = await Location.requestForegroundPermissionsAsync();
  if (!granted) {
    setOk(false);
  }
  const {
    coords: { latitude, longitude },
  } = await Location.getCurrentPositionAsync({ accuracy: 5 });
  const location = await Location.reverseGeocodeAsync(
    {
      latitude,
      longitude,
    },
    { useGoogleMaps: false }
  );
  setCity(location[0].city);
};
  useEffect(() => {
    ask();
  }, []);

requestPermissionAsync()로 권한 요청

reverseGeocodeAsync는 위도와 경도를 주소로 변환해 준다

GeocodeAsync는 주소를 위도, 경도 숫자로 변환해 준다

 

ActivityIndicator은 로딩 중 표시

 

Expo Vector Icons로 아이콘 삽입도 가능

Icons
{
Clear: "day-sunny",
Clouds: "cloudy",
Rain: "rain",
Atmosphere: "cloudy-gusts",
Snow: "snow",
Drizzle: "day-rain",
Thunderstorm: "lightning",
};