React Native 란?

페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다. 맥 OS 환경에서 리액트 네이티브를 사용하기 위해서는 Xcode를 설치해야 한다.

Expo

Expo는 리액트 네이티브를 베이스로 iOS, AOS, 웹 등을 개발하고 쉽게 빌드, 배포할 수 있도록 도와주는 프레임워크이다. Expo는 바닐라 react-native로 앱을 개발할 때 초기에 해줘야 하는 여러가지 환경 설정이나 빌드를 쉽게 해준다. 쉽고 빠르게 개발을 할 수 있다는 장점이 있지만, react-natvie에서 널리 사용되는 라이브러리들을 사용하기 위해서는 eject 가 필요하다. 초반에 리액트 네이티브를 익힐때까지는 Expo를 사용하는 것이 도움이 될 수 있다.

Expo tutorial

https://expo.io/learn 에 잘 설명되어 있다.

1. Expo 설치하기

터미널에서 $ npm install expo-cli --global 을 입력한다. 에러가 나는 경우가 잦은데 그럴 때는 $ sudo ~ 로 설치한다.

2. 프로젝트를 준비하기

$ expo init myNewProject
$ cd myNewProject
$ expo start

3. Start Coding!

Vs Code, Atom 등 원하는 에디터에서 빌드 된 폴더를 연다.

4. Expo Client 설치

스마트폰에서 Expo Client를 설치, 로컬호스트 화면의 QR 코드를 찍으면 실시간으로 변화하는 UI 를 모바일 화면에서 확인이 가능하다.

App.js 초기 화면

리액트 네이티브는 모바일 어플리케이션을 개발하기 위한 언어이기 때문에 <h1>, <p>, <div> 등 JSX 에서 사용하는 태그와는 다른 컴포넌트 형식으로 구성되어 있다. 주의! 리액트 네이티브에서는 App.js 파일을 삭제하면 안된다!

리액두네이티부 맛보기 🤩

컴포넌트에 style 주기

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
export default function App() {
  return (
    <View style={styles.container}>
      <TouchableOpacity>
        <Text style={styles.centerText}>나는 지형 😎</Text>
      </TouchableOpacity>
      <StatusBar style="light" />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  centerText: {
    fontSize: 50,
    color: "white",
  },
});

컴포넌트안에 style={styles.container} 를 추가해서 하단에 스타일을 적용할 수 있다. React 의 Styled-component 라이브러리와 비슷한듯 다른 형태..!

Basic Components

React Native 공식문서

컴포넌트는 상단에 임포트해서 사용한다.

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Alert,
  Switch,
} from "react-native";

<TouchableOpacity>로 UI를 감싸는 경우 탭 할 때 Opacity가 살짝 변하는 효과가 나타난다. 즉 사용자에게 터치가 되었다는 표시가 될 수 있다.

활용 예시

export default function App() {
  const onPress = () => {
    console.log("onPress");
    Alert.alert("띠용");
  };
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={onPress}>
        <Text style={styles.centerText}>테스트 😎</Text>
      </TouchableOpacity>
    </View>
  );
}

테스트 글자를 탭하는 경우 Alert 창이 나타난다.

<Switch /> true/false 값을 토글하는 boolean 스위치
<ActivityIndicator /> 로딩중임을 나타내는 인디케이터 (뱅글뱅글)

추가 학습 자료 : https://www.youtube.com/c/wcandillon/featured