[React Native -3] 기초 다지기

브라우저에서 React 어플리케이션을 만들 수 있게 해주는 온라인 코드에디터입니다

-> 아이패트로 코딩하거나 vsCode, node.js를 다운받을 수 없는 환경일 때 활용하기 좋습니다

https://snack.expo.dev/

Snack - React Native in the browser

 

 

 

 The Rules of Native

1. React Native는 웹사이트가 아니다

HTML이 아니기 때문에 div는 쓸 수 없다

→ 대신에 View 가 있다

• view는 container이다
• 니가 만들 모든 것은 view로 만들게 될 것
• 항상 import해야함 

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

 

2. React native에 있는 모든 text는 Text component에 들어가야함

→ 브라우저가 아니라서 span을 쓸 수 없다 <p><h1>도 없음

• veiw안에 text넣으면 오류 발생

 

3. View에 style이 있다 , react.js에서 할 수 있는 것과 비슷함

차이점은 일부 style을 사용할 수 없다

ex) border:”1px green dashed”

border가 유효한 style property가 아니다, 웹에서 사용한 모든 것을 사용할 수 없다

 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

❓ StyleSheet.create를 쓰는 이유

- 아주 좋은 자동완성 기능을 제공

-  스타일 component를 정리하는 데 유용, but 반드시 필요한 것은 아님

 

<StatusBar style="light" />

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

 

---

 

 

 React Native Packages

과거에는 더 많은 component가 있었다 

local stroage api 사라짐, React Native는 더 이상 navigation을 제공하지 않는다

 

❓ 왜 APIs와 Components가 ReactNative에서 없어지고 있는걸까?

초기에 ReactNative팀은 사람들에게 가능한 많은 Components와 API를 제공하고 싶었다 ex) 어싱크 스토리지

하지만 그렇게 할 수 없다는 것과 정말 많은 버그가 있다는 것을 알게 되고, 모든 Components를 지원하는 게 어렵다는 것깨달음 → Components, API, react Native를 줄이고 가장 중요한 기능만 남김

 

실제 앱에서는 제공하는 Component들로는 부족하다 ex) 페이스북 로그인, 네비게이션 , 어싱크 스토리지

 

문제는 커뮤니티에 의존해야 한다 또한 만든사람들이 바쁘다면 버그를 고치기를 기다려야 한다 or 우리가 고쳐야한다

* Expo는 package가 중요한 걸 안다. Expo팀은 자체적으로 packages와 APIs를 만들기 시작함 → Expo SDK

 

---

 

 

Layout System

1. View에 Flex Container가 되라고 말할 필요 x
2. 여기서는 이미 Container View가 Flex Container이다
3. 따라서 기본적으로 모든 View는 Flex Container이다 (얘네들한테 Flex Size를 줘야함)

* 모바일에서 Flex Direction 기본값은 Column (웹에서는 Row)

* Overflow가 있다고해서 스크롤 할 수 있는 건 아님 (브라우저가 아님)

 

 

import { View } from 'react-native';
import React from "react";


export default function App() {
  return (
   <View>
      <View style={{width:200, height:200, backgroundColor:"yellow"}}></View>
      <View style={{width:200, height:200, backgroundColor:"orange"}}></View>
   </View>
  );
}

너비와 높이에 기반해서 레이아웃을 만들지 않을 것!!!

반응형 디자인은  스크린 사이즈 다양하기 때문에 width, height 사용하지 않는 것이 좋다

 

부모 Container flex:1 비율로만 표현한다

이미 Flex Container가 되어 있다

import { View } from 'react-native';
import React from "react";


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

React Native에서는 기본값과 비율 덕분에 레이아웃을 만들기 쉽다