React Native 개념

react native

//expo 설치
npm install --global expo-cli
//맥북이라면 watchman 설치
brew update
brew install watchman

expo init my-project

npx expo login --username "jiyeong"

 

리액트 네이티브를 사용하면 실제로 앱을 만들 수 있다.

Reactjs일 경우 브라우저 돔으로 화면을 띄운다. 하지만 네이티브는 브라우저 없는 인터페이스로, 우리와 운영체제(ios,안드로이드)사이에 있다.

그래서 리액트네이티브로 앱을 만들면 ios와 안드로이드코드로 번역된다.

RN은 ios와 안드로이드 코드로 번역할 수 있는 bridge역할이 있다고 말할 수 있다.

예를들어 버튼을 만들 때 react는 화면에 버튼을 그리는 것이라면 RN은 버튼을 표시해 달라고 요청하는 것이다.

우리는 코틀린이나 스위프트 언어 대신 react native 코드를 자바스크립트로 만들면 된다.

 

중요한 것은 폰 안에 있는 브라우저가 아니라는 것이다.

 

앱에서 자바스크립트 인터페이스를 실행시키고 운영체제와 이야기한다. 웹사이트가 아닌 앱을 만드는 것이다.

 

리액트 네이티브 초기설정

expo init 프로젝트이름
//choose blank(typescript)
//컴퓨터에서도 로그인 폰에서도 로그인
expo login//컴퓨터로 로그인하기

snack.expo.dev 사용하면 브라우저에서 시뮬레이터 돌릴 수 있다.

RN은 기본적으로 개발자들에게 최대한 많은 apis와 components를 제공하려고 했지만, 유지 관리와 업데이트가 어렵다는 것을 깨달았다. 그래서 예전에는 제공했던 api들과 component들의 서비스 규모를 줄였다.

asyncstorage같은 경우도 없어졌다.

RN을 작게만들기로 하고 쉽게 RN을 유지하고 빠르게 만드는 것에 집중하기 위해서 그러한 결정을 한 것이다.

 

expo SDK 자체적으로 api와 component만들어주기 때문에 처음 RN을 접할 때 사용하기 좋다.

 

컴포넌트 개념

Expo가 App컴포넌트를  App.js파일에서 내보내서 루트 컴포넌트로 렌더링한다. 따라서 모든 UI 요소와 컴포넌트는 App컴포넌트 산하에 자식이나 자손이 되어야 한다.

 

component는 화면에 렌더링할 항목이기 때문에 꼭 return 이 필요하다.

View는 div와 같은 역할을 하는 정말 기본적인 component이다.  브라우저가 아니기 때문에 view를 쓴다.

웹개발에서의  div와는 다르게 View 에는 텍스트를 넣을 수 없다.

View는 일반적으로 콘텐츠를 담는 상자나 컨테이너 구축에 사용된다. 그래서 텍스트를 View안에 바로 표시할 수 없다. Text컴포넌트 안에서 텍스트를 작성해야 한다.
View는 컨테이너 컴포넌트이다.웹에서 section이나 article이 다 View로 표현된다.

웹 전용 React에서는 사용할 HTML요소를 import할 필요가 없지만 RN에서는 import 해와야한다. 심지어 View와 Text까지도.

 

예를 들어 Button컴포넌트를 살펴보자면

<Button>버튼</Button>

이렇게 사용할 수 없다

<Button title="버튼"/>

이렇게 사용해야 실행되는 기기의 기본 플랫폼에 맞춰 구현된다.

 

스타일링

RN은 브라우저가 아니기 때문에 CSS 코드를 작성할 수 없어서 CSS언어도 존재하지 않는다. 대신에 스타일을 적용한다. 
여러 핵심 컴포넌트의 프로퍼티를 이용해 inline Styles을 적용하거나 StyleSheet객체를 사용해 CSS 프로퍼티와 비슷하게 사용할 수 있다. Styled-component를 사용해도 된다.

 

RN은 CSS를 지원하지 않는다. 그래서 CSS 파일을 추가하거나 언어를 사용하지 않는다.
inline Styles(인라인 스타일)을 추가해서 스타일 객체를 프로퍼티로 전달하거나, 별도의 (StyleSheet)스타일시트 객체를 정의헤서 그걸 프로퍼티로 전달한다.
인라인 스타일 프로퍼티를 추가한 후 자바스크립트 객체 형태로 값을 전달한다. 객체에 지원되는 모든 스타일 프로퍼티를 설정할 수 있고, RN은 어느 프로퍼티가 지원되는지 결정한다. CSS프로퍼티와 유사하지만 완전히 같지는 않다. CSS언어의 영향을 받았지만 CSS의 프로퍼티와 기능 일부만 지원하고 이름이 전부 일치하지는 않는다.

//App.tsx
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
//styles로 써도 되지만 StyleSheet.create를 쓰는 이유는 object생성,자동완성으로 생성
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },text: {
     fontSize: 28,
  },
});

expo에서도 배포를 할 수 있다.

 

하지만 expo도 단점이 있다.

우리는 js와 app.json파일만 건들일 수 있다.

expo sdk에 없는 것도 있다. 그래서 그걸 설치할 때 접근이 어려울 수 있다. 4.3

expo로 작업할 때는 infrastructure를 통제하고 있기 때문에 접근할 수 없다.

또 expo는 무겁다. 코드가 무겁다.

설정의 자유와 expo에 모든 것을 맡겨서 얻는 편안함 사이의 타협하는 것이다.

expo 가 다 해주지만 그래서 불편하다.

이와 같은 상황을 해결해 주기 위해 eject라는 커맨드가 있다. eject커맨드를 실행하면 꺼내기를 할 수 있다.

모든 infrastrucutre를 사용하기 위해 create-react-native-app 을 사용하면 infrastructure가능하고 expo도 가능하다.