[React Native #01] React Native란 무엇일까

[React Native #01] 기초

React Native란?

네이티브 모바일 앱을 제작하기 위한 React 기능 기반의 오픈 소스 프레임워크

React 구성 요소와 동일한 API 구조를 사용 → React에 대한 사전지식이 있으면 유리하게 사용할 수 있음

React.js + React Native → Real Native Mobile Apps (iOS / Android)

UI, 로직이 처리되는 방식

• UI 요소(View, Text..): Native에 컴파일됨
• 로직(javascript 코드): 컴파일되지 않음

React Native 내장 컴포넌트

코드 구성

const App = preops => {
	return (
    	<View>
        	<Text>Hello world!</Text>
        </View>
    );
};

 

해당 코드는 Native App 코드로 컴파일되어 React Native App으로 묶임

React Native UI Component	Android	IOS	Web
<View>	<ViewGroup>	<UIView>	<div>
<Text>	<TextView>	<UITextView>	<p>
<Image>	<ImageView>	<UIImageView>	<img>
<ScrollView>	<ScrollView>	<UIScrollView>	<div>
<TextInput>	<EditText>	<UITextField>	<input type="text">

React Native APIs

더 많은 React Native APIs을 보려면 아래 공식 문서 참조

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native

개발 환경  세팅

대표적으로 Expo CLI와 React Native CLI 두 가지의 방법이 있음.

Expo는 무료 서드 파티 서비스로, 자체 제공하는 여러 가지 툴을 통해 프로젝트 생성 및 여러 가지 기능들을 쉽게 활용할 수 있음. 또한 Expo로 프로젝트를 생성했다 하더라도 React Native CLI 워크플로우로 전환이 가능함

React Native CLI은 React Native 측과 관련 커뮤니티가 제공하는 툴. React Native 개발 설정을 제공하고 네이티브 기능 활용 시 Expo보다 비교적 작업이 번거로움. Java, Objective-C, Swift 같은 타 네이티브 소스 코드와 통합하기 쉬움.

정리를 해보면,

Expo CLI	React Native CLI
무료 서드 파티 서비스	React Native 팀과 커뮤니티가 제공하는 툴
쉬운 개발 환경 셋팅 이에 관련한 추가적인 설명은 나중에..	기본적인 개발 설정 제공(추가적인 구성은 직접 설정)
카메라같은 특정 네이티브 기기 활용이 쉬움	카메라같은 특정 네이티브 기기 활용이 어려움

따라서 내가 모바일 개발 환경에 익숙하지 않다 하시는 분들께는 Expo CLI를, 모바일 개발 환경에 익숙하며 여러 가지 네이티브 소스 코드와 통합할 계획이 있다면 React Native CLI를 선택하는 것을 추천함.