React-native - 기본

Jamwon·2021년 10월 24일

react native

React-Native

목록 보기

3/5

노마드 코더의 강의를 보며 정리한것..
링크

View

view는 컨테이너 이다.

div 대신 View

꼭 import를 해줘야 사용할 수 있다.

Text

span 이나 p가 없다.
어쩌고 저쩌고 와 같이
text 컴포넌트를 사용한다.

style

View에는 style이 있다.

react native는 웹이 아니기 때문에 style중에 사용할수 없는 것들이 있다(기존 web에서는 가능하던것) 98% 정도는 사용할수 있다고 한다.

StyleSheet.create 로 style object를 생성하여 사용한다. (사용하면 편하다, 필수는 아님) - css 자동완성이 지원되서 매우 편하다.

StatusBar

어플리케이션의 상태바를 조정할 수 있다.

React Navtive Packages

공식문서

여러가지 컴포넌트들을 확인할 수 있다.

확인해 보면 RN는 더이상 navigation을 제공하지 않는다.
하지만 예전 버전의 문서를 보면 navigation이나 datePicker같은 것들이 있다.

예전에는 가능한 많은 컴포넌트를 제공하고 싶어했지만 버그가 많았기 때문에 모든 컴포넌트를 지원하기 어렵다는것을 깨닫고 APIs의 규모를 줄였다.

가장 중요한 기능만 남김!!

아무튼 그렇기 때문에 많은 커뮤니티에서 package와 APIs를 만들어서 지원한다.
따라서 RN가 지원하지 않는 기능 패키지들은 우리가 검색을 해서 사용해야한다.

Expo는 지원하지 않는것들 중에 앱을 만들때 중요하다고 생각하는것들을 추합해서 자체적으로 Packages와 APIs를 만들기 시작했다 = Expo SDK !

React Navtive Packages에 없으면 Expo Package를 보면 된다. 정말 많은것을 지원해준다고 한다.

설치만 하고 import하면 사용할 수 있다.

expo-status-bar와 react-native-status-bar가 존재하는 이유

이유는 Expo가 RN의 일부 컴포넌트와 APIs를 복제해서 개선했기 때문이다.
둘의 기능은 비슷하지만 함수라던지 이런것들이 약간 다르다!

결론 - RN팀은 RN 서비스 제공 부분을 축소했다! why? RN을 빠르게 만드는것에 집중했기 때문에 !

따라서 - 커뮤니티에서 packages를 만들어야 하기 때문에 비슷한 기능을 하는 packages가 많이 존재한다. 사용자는 이중에 자주 업데이트 되지 않고 버그가 많이 있는 packages들도 있다.

그래서 Expo는 우리에게 필요한 Packages를 따로 제공하기 시작했다.

RN의 Layout System

RN의 Flexbox는 웹과 거의 비슷하다.

expo init practice

로 연습 프로젝트를 생성 option은 blank로 생성한다.

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

export default function App() {
  return (
    <View >

      <View style={{ width: 100, height: 100, backgroundColor: "tomato" }}></View>
      <View style={{ width: 100, height: 100, backgroundColor: "teal" }}></View>
      <View style={{ width: 100, height: 100, backgroundColor: "orange" }}></View>

    </View>
  );
}

각자의 view는 서로 위에있다

 <View style={{ flexDirection: "row" }}>

      <View style={{ width: 100, height: 100, backgroundColor: "tomato" }}></View>
      <View style={{ width: 100, height: 100, backgroundColor: "teal" }}></View>
      <View style={{ width: 100, height: 100, backgroundColor: "orange" }}></View>

    </View>

위처럼 부모 View에 flexDirection 값을 "row"로 부여하면

가로로 위치한다.
display를 felx하지 않아도 container View가 Flex container다. 모든 View는 기본적으로 Flex container다.

그리고 모든 FlexDirection의 기본값은 Column이다.

그리고 크기가 넘쳐도 스크롤이 되지 않는다.

View를 width와 height값에 따라 만드는건 부적절하다!!

모바일 기기의 스크린 사이즈는 다양하기 때문에 width와 height를 사용하지 않고 FlexSize를 사용한다.

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>
  );
}