[React Native] React Native란? / 사용법

React Native란?

React의 문법으로 ( javascript 기반 ), android, ios의 앱을 만드는 프로그램

javascript로 작성된 코드들을, android 와 ios에 맞춰 바꾸어준다. ( 크로스플랫폼 )

 

React Native 개발 과정

Node.js 설치

VsCode 설치

VsCode 편집기로 코드(소스파일) 작성

소스파일을 android, ios 앱으로 빌드

앱을 가상장치(에뮬레이터)에서 테스트

앱 배포

 

 

Expo cli 이용 React Native 설치

[React.js] Expo란?

 

React Native cli 이용 React Native 설치

1. Mac - android

( Node, Watchman, React Native Cli, JDK, Android Studio, CocoaPods )

2. Mac - ios

( Node, Watchman, React Native Cli, Xcode, CocoaPods )

3. Window, Linux - android

( Node, React Native Cli, JDK, Android Studio )

 

Node.js 설치하기

brew install node

 

Watchman 설치하기

brew install watchman

 

Java 개발 키트 설치하기

brew tap homebrew/cask-versions
brew install --cask zulu11

// Azul Zulu 라는 OpenJDK 배포판을 설치 - intel 및 m1칩 mac 지원

 

Android Studio 설치

Download Android Studio and SDK tools  |  Android Developers

설치해야 하는 항목

Android SDK
Android SDK Platform
Android Virtual Device

 

Android SDK 설치

1. SDK Manager 열기

 

2. SDK Platforms 설정

1. SDK Platforms 클릭
2. Show Package Details 클릭
3. Android 11.0 (R) 내부의 두가지 항목 선택하기

 

3. SDK Tools 설정

1. SDK Tools 클릭
2. Show Package Details 클릭
3. Android SDK Build-Tools 내부의 30.0.2 항목 선택하기
4. Apply 버튼 클릭해, SDK 빌드도구 설치 ( 경고메시지는 Yes를 눌러줍니다 )

 

ANDROID_SDK_ROOT 환경 변수 설정

React코드(jsx)를, Native 코드(java)로 바꾸어, 앱을 빌드하기 위한 설정

".bash_profile" 나,  ".bashrc"( zsh, .zprofile, .zshrc ) 파일에, 아래의 코드를 추가해준다.

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

 

셸(터미널)에 환경변수 파일을 불러오기

source $HOME/구성파일이름

 

ANDROID_SDK_ROOT가 설정되었는지 확인하기

$echo ANDROID_SDK_ROOT

 

SDK 전용 경로가 설정었는지 확인하기

$echo $PATH

 

CocoaPods 설치

sudo gem install cocoapods

 

React Native CLI

React Native에 기본 내장되어있는, CLI 명령어 형태로 React Native를 관리하는 프로그램.

특정 CLI를 전역적으로 설치, 관리하는 대신 Node.js의 npx를 사용해 런타임시에만 작동하도록 하는 것이 좋다.

npx react-native <명령어>  명령이 실행될때, Cli의 안정 버전이 다운로드되어 실행된다.

 

 

React Native 프로젝트 만들기

npx react-native init MyProject

 

cd MyProject

 

npx react-native start

 

npx react-native run-android

---

React Native의 기본 컴포넌트

View란, 앱 화면에 보이는 직사각형 요소 ( html의 div와 동일 )

컴포넌트	같은 기능을 하는 웹 태그
<View>	스크롤 기능 없는 <div>
<Text>	<p>
<Image>	<img>
<ScrollView>	<div>
<TextInput>	<input type="text">
<TouchableOpacity onPress={}>	<button onclick={}>

 

React 컴포넌트 사용법

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

export default function App() {
  // View 컴포넌트에 style요소를 사용해, 스타일을 적용할 수 있다.
  return (
    <View style={styles.container}>
      <Text>Hello!</Text>
    </View>
  )
}


/* 사용할 스타일 정의하기
  flex: 1  -  화면 전체를 사용
  justifyContent: "center"  -  화면 세로 기준 가운데 정렬
  alignItems: "center"  -  화면 가로 기준 가운데 정렬
  
  react-native는 기본적으로 flex-direction이 column으로 설정돼있다.
*/

const styles = StyleSheet.create({
  container: {
    flex: 1
    justifyContent: "center",
    alignItems: "center",
  }
})

 

 

예시 화면

 

컴포넌트 옵션 ( 추가중 )

컴포넌트	옵션	옵션명	설명
<View>	style={스타일}		스타일을 지정
<Text>
<Image>	source={이미지경로}		이미지를 지정
	resizeMode="옵션"	center	화면 정중앙에 보기 좋은 비율로 맞추기
		contain	이미지를 감싸고 있는 박스에 맞추기 ( 이미지 전체 부분 다 보여줌 )
		cover	이미지를 감싸고 있는 박스에 맞추기 ( 벗어난 부분 자름 )
<ScrollView>
<TextInput>	type="타입"	text	문자를 입력 받음
<TouchableOpacity>	onPress={함수}		터치시 실행할 함수 지정