React Native에 대한 자세한 설명(초보자를 위한 자습서)
게시 됨: 2022-03-11React Native가 발표되었을 때 첫 번째 반응은 압도적으로 긍정적이었습니다. 전통적으로 모바일 공간의 웹 기술에 대해 생각할 때 Apache Cordova와 같은 것이 떠오릅니다. 이를 통해 웹 사이트 또는 웹 애플리케이션을 모바일 플랫폼용 애플리케이션으로 패키징할 수 있습니다. 이 초보자 튜토리얼에서는 React Native의 아키텍처, React Native의 철학, 같은 공간에서 다른 솔루션과 어떻게 다른지 살펴보겠습니다. 이 기사의 끝에서 우리는 React "Hello World" 애플리케이션을 React Native 애플리케이션으로 변환할 것입니다.
React Native는 비교적 새로운 기술이라는 말로 시작하겠습니다. 2015년 3월부터 공식적으로 사용할 수 있게 되었고, 그해 초부터 비공개 베타로 진행되었으며, 그 전에 잠시 Facebook에서 내부적으로 사용되었습니다. "로마는 하루아침에 이루어지지 않았다"는 말은 일반적으로 기술에도 적용됩니다. grunt 와 같은 도구와 Node.js와 같은 플랫폼은 성숙하는 데 몇 년이 걸렸습니다. 웹 세계에서는 상황이 빠르게 움직이고 있으며 엄청난 수의 프레임워크, 패키지 및 도구가 매일 출시됨에 따라 개발자는 조금 더 회의적인 경향이 있으며 모든 과대 광고에 뛰어드는 것을 원하지 않습니다. 그들은 벤더 종속 상황에 이르렀습니다. 우리는 React Native를 특별하게 만드는 요소, 왜 이것이 가치 있는 기술인지, 유니콘과 레인보우가 전부가 아닌 몇 가지 사례를 다룰 것입니다.
후드
모바일에서 웹 기술에 대해 이야기할 때 사용 가능한 솔루션은 일반적으로 다음 범주 중 하나에 속합니다.
모바일 웹 브라우저에서 웹 애플리케이션 번들링
웹 애플리케이션은 일반적으로 WebView라고 하는 모바일 브라우저에 있습니다. 주요 리팩토링 없이 웹사이트 또는 웹 애플리케이션은 모바일 장치에서 작동합니다. 완전한 사용자 경험을 위해 기기 방향 변경과 더 작은 화면을 탭하거나 듣는 것과 같은 모바일 브라우저 이벤트를 고려해야 할 수도 있지만 최소한의 노력으로 작동하는 모바일 버전이 있습니다. Cordova/PhoneGap은 이 범주에서 가장 인기 있는 옵션입니다. 불행히도 이 옵션에는 큰 단점이 있습니다. 어떤 경우에는 Cordova를 사용하여 개발한 응용 프로그램이 기본 응용 프로그램, 특히 그래픽이 많은 응용 프로그램보다 훨씬 느립니다. 다른 경우에 모바일 운영 체제는 모바일 브라우저에서 사용할 수 있는 WebView의 모든 기능을 실제로 제공하지 않습니다. 사용자 경험도 기본 애플리케이션과 다를 수 있습니다. 이는 애플리케이션 또는 플랫폼 자체로 인해 발생할 수 있습니다. 이 문제는 스크롤 막대가 동일하게 느껴지지 않는 것부터 요소를 탭할 때 눈에 띄는 지연이 있는 것까지 다양합니다.
네이티브 기술로 컴파일
완전히 다른 솔루션은 결국 네이티브 코드베이스를 만드는 것입니다. 이것은 원본 소스 코드를 다른 프로그래밍 언어로 변환함으로써 발생합니다. 우리는 약간의 불확실성이 있는 추상화 계층에 대한 기본 성능을 교환합니다. 폐쇄 소스 솔루션의 경우 내부에서 어떤 일이 일어나고 어떤 종류의 블랙박스를 다루고 있는지조차 모릅니다. 다른 경우에는 다음 모바일 운영 체제 업데이트가 우리 코드를 얼마나 손상시킬지, 언제 수정 사항이나 업데이트를 사용할 수 있는지 확실하지 않습니다. 이 범주의 인기 있는 예는 Hax입니다.
자바스크립트 레이어 사용
여기서는 모바일 환경의 JavaScript 엔진을 사용하고 거기에서 JavaScript를 실행합니다. 네이티브 컨트롤은 JavaScript 개체 및 함수에 매핑되므로 fancyButtonRightHere() 라는 함수를 호출하면 화면에 버튼이 나타납니다. NativeScript 또는 Appcelerator Titanium은 이 범주의 잘 알려진 예입니다.
React Native는 세 번째 범주의 것으로 분류될 수 있습니다. iOS 및 Android 버전의 경우 React Native는 iOS의 기본 JavaScript 엔진인 JavaScriptCore를 내부적으로 사용합니다. JavaScriptCore는 Apple Safari 브라우저의 JavaScript 엔진이기도 합니다. OS X 및 iOS 개발자는 원하는 경우 실제로 직접 인터페이스할 수 있습니다.
한 가지 큰 차이점은 React Native가 JavaScript 코드를 별도의 스레드에서 실행하므로 사용자 인터페이스가 차단되지 않고 애니메이션이 매끄럽고 부드러워야 한다는 것입니다.
반응이 핵심 기능입니다
React Native의 "React"가 우연히 삽입된 것이 아니라는 점은 주목할 가치가 있습니다. React Native의 경우 React가 정확히 무엇을 제공하는지 이해해야 합니다. 다음 개념은 React와 React Native 모두에서 동일하게 작동하지만 이러한 코드 예제는 브라우저에서 실행되도록 조정되었습니다.
단일 렌더링 진입점
간단한 React 컴포넌트를 볼 때 가장 먼저 알 수 있는 것은 컴포넌트에 render 기능이 있다는 것입니다. 실제로 컴포넌트 내부에 정의된 렌더 함수가 없으면 React에서 오류가 발생합니다.
var MyComponent = function() { this.render = function() { // Render something here }; };특별한 점은 여기에서 DOM 요소를 엉망으로 만들지 않고 DOM에서 렌더링될 내용을 나타내는 XML 기반 구성을 반환한다는 것입니다. 이 XML 기반 구조를 JSX라고 합니다.
var MyComponent = function() { this.render = function() { return <div className="my-component">Hello there</div>; }; };특별한 JSX 변환기는 XML처럼 보이는 모든 코드를 가져와서 함수로 변환합니다. 변환 후 구성 요소는 다음과 같습니다.
var MyComponent = function() { this.render = function() { return React.createElement("div", { className: "my-component" }, "Hello there"); }; }; 가장 큰 장점은 구성 요소를 빠르게 살펴봄으로써 구성 요소가 무엇을 해야 하는지 항상 알 수 있다는 것입니다. 예를 들어 <FriendList /> 구성 요소는 다수의 <Friend /> 구성 요소를 렌더링할 수 있습니다. render 함수 내부 이외의 다른 곳에서는 구성 요소를 렌더링할 수 없으므로 렌더링된 구성 요소가 정확히 어디에서 왔는지 알 수 없다는 우려가 없습니다.
단방향 데이터 흐름
컴포넌트의 콘텐츠를 빌드하기 위해 React는 간단히 속성 또는 소품을 제공합니다. XML 속성과 유사하게 props를 컴포넌트에 직접 전달한 다음 생성된 컴포넌트 내부에서 props를 사용할 수 있습니다.
var Hello = function(props) { this.render = function() { return <div className="my-component">Hello {props.name}</div>; }; }; var Greeter = function() { this.render = function() { return <Hello name="there" /> } };이것은 우리의 구성 요소가 나무와 같은 구조로 되어 있고, 우리는 자식 요소를 구성할 때만 데이터를 전달할 수 있습니다.
변경 시 다시 렌더링
소품 외에도 구성 요소는 내부 상태를 가질 수도 있습니다. 그 동작의 가장 눈에 띄는 예는 버튼을 눌렀을 때 값을 업데이트하는 클릭 카운터입니다. 클릭 수 자체가 상태에 저장됩니다.
각 소품 및 상태 변경은 구성 요소의 완전한 재렌더링을 트리거합니다.
가상 DOM
이제 props 또는 state가 변경될 때 모든 것이 다시 렌더링될 때 어떻게 React 자체가 잘 수행되고 있습니까? 마법의 요소는 "가상 DOM"입니다. 무언가를 다시 렌더링해야 할 때마다 업데이트된 DOM의 가상 표현이 생성됩니다. 가상 DOM은 구성 요소 트리를 모델로 한 요소의 가벼운 표현으로 구성되어 실제 DOM 요소를 생성하는 것보다 생성 프로세스를 훨씬 더 효율적으로 만듭니다. 실제 DOM에 변경 사항을 적용하기 전에 구성 요소 트리에서 변경 사항이 정확히 어디에서 발생했는지 확인하기 위해 검사가 수행되고 diff가 생성되고 해당 특정 변경 사항만 적용됩니다.
이 React Native Tutorial 시작하기
React Native용으로 개발하기 위해 초보자가 설정해야 하는 특정 전제 조건이 있습니다. iOS가 지원되는 첫 번째 플랫폼이었고 이 튜토리얼에서 다룰 플랫폼이었기 때문에 macOS와 Xcode, 최소 버전 6.3이 필요합니다. Node.js도 필요합니다. brew install watchman 을 사용하여 Brew 패키지 관리자를 통해 Watchman을 설치하는 것이 도움이 됩니다. 이것이 반드시 필요한 것은 아니지만 React Native 프로젝트 내에서 많은 파일을 처리할 때 도움이 됩니다.
React Native를 설치하려면 npm install -g react-native-cli 를 사용하여 React Native 명령줄 애플리케이션을 설치하기만 하면 됩니다. 그런 다음 react-native 명령을 호출하면 새로운 React Native 애플리케이션을 만드는 데 도움이 됩니다. react-native init HelloWorld 를 실행하면 상용구 코드를 찾을 수 있는 HelloWorld 라는 폴더가 생성됩니다.
React 애플리케이션 변환
React가 핵심 기능이고 React 라이브러리에서 가져온 핵심 원칙을 사용하여 최소한의 React "Hello World" 애플리케이션을 React Native 애플리케이션으로 변환하는 데 필요한 사항을 살펴보겠습니다.
이 코드 예제에서는 일부 ES2015 기능, 특히 클래스를 사용합니다. React.createClass 를 고수하거나 인기 있는 모듈 패턴과 유사한 함수 형식을 사용하는 것이 완전히 가능합니다.
var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));1단계: CommonJS 모듈 수용
첫 번째 단계에서 React 모듈이 대신 react-native 를 사용하도록 변경해야 합니다.
var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));일반적으로 React 웹 애플리케이션을 개발할 때 도구 파이프라인의 일부인 것은 React Native의 필수적인 부분입니다.
2단계: DOM이 없습니다
당연히 모바일에는 DOM이 없습니다. 이전에 <div /> 를 사용한 곳에서 <View /> 를 사용해야 하고 <span /> 을 사용한 곳에서 여기서 필요한 구성 요소는 <Text /> 입니다.
import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content')); <div /> 요소에 직접 텍스트를 넣는 것이 매우 편리하지만, 기본 세계에서 텍스트는 <View /> 에 직접 넣을 수 없습니다. 이를 위해 <Text /> 컴포넌트를 삽입해야 합니다.
import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));3단계: 인라인 스타일을 사용하는 것이 좋습니다.
React Native를 사용하면 웹 세계에서 매우 익숙한 float 및 inline-block 을 사용하는 대신 Flexbox 모델링을 사용할 수 있습니다. 흥미로운 점은 React Native가 CSS를 사용하지 않는다는 것입니다.
import React from 'react'; import {View, Text, StyleSheet, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View style={styles.box} onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));인라인 스타일을 사용하는 것은 초보자에게 어리둥절해 보입니다. React 개발자가 JSX에 직면하고 이전에 Handlebars 또는 Jade와 같은 템플릿 엔진을 사용할 때 거쳐야 했던 전환과 유사합니다.
아이디어는 우리가 CSS를 사용하는 방식으로 전역적으로 스타일시트를 가지고 있지 않다는 것입니다. 구성 요소 수준에서 직접 스타일시트를 선언하므로 구성 요소가 수행하는 작업, 구성 요소가 생성하는 레이아웃 및 적용되는 스타일을 확인하는 데 필요한 모든 정보가 있습니다.
import React from 'react'; import {Text} from 'react-native'; var Headline = function(props) { this.render = () => <Text style={headlineStyle.text}>{props.caption}</Text>; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline;4단계: 이벤트 처리
웹 페이지를 클릭하는 것과 동일한 것은 모바일 장치에서 요소를 탭하는 것입니다. 요소를 탭할 때 "경고"가 나타나도록 코드를 변경해 보겠습니다.
import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content')); 이벤트를 <View /> 구성 요소에서 직접 사용할 수 있는 대신 이벤트를 트리거하는 요소를 명시적으로 사용해야 합니다. 이 경우 보기를 누를 때 터치 이벤트가 발생합니다. 사용할 수 있는 다양한 유형의 터치 가능한 구성 요소가 있으며 각각은 서로 다른 시각적 피드백을 제공합니다.
5단계: 플랫폼 전반에서 동작 사용자 지정
Platform.OS 값에 액세스하여 React Native 애플리케이션이 실행 중인 플랫폼을 감지할 수 있습니다. 위의 예에서 실행 중인 플랫폼에 따라 다른 경고 메시지를 표시하려고 한다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다.
... clickMe() { var message = ''; if(Platform.OS == 'ios') { message = 'Welcome to iOS!'; } else if(Platform.OS == 'android') { message = 'Welcome to Android!'; } Alert.alert(message); } ... 또는 스위치와 유사한 구문을 제공하는 select 메서드도 사용할 수 있습니다.
… clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' }) ); } ... 6단계: 사용자 정의 글꼴 및 react-native link
사용자 정의 글꼴을 추가하려면 몇 가지 단계를 건너뛰어야 합니다. 우선, 글꼴 전체 이름과 글꼴의 파일 이름이 동일한지 확인하십시오. iOS는 글꼴을 선택하기 위해 글꼴의 전체 이름을 사용하고 Android는 파일 이름을 사용합니다.
따라서 글꼴의 전체 이름이 myCustomFont 인 경우 글꼴의 파일 이름이 myCustomFont.ttf 인지 확인하십시오.
그런 다음 자산 폴더를 만들고 npm이 이 폴더를 가리키도록 해야 합니다. 애플리케이션 루트 디렉토리의 assets/fonts 아래에 폴더를 먼저 생성하면 됩니다. 다른 모든 디렉토리가 가능하지만 이것은 fonts 디렉토리에 사용되는 일반적인 이름입니다.
React의 npm 통합 섹션인 rnpm 아래에 Assets 속성을 추가하여 자산이 있는 위치를 npm에 알릴 수 있습니다.
"rnpm": { "Assets": [ "./assets/fonts/" ] } 모든 작업을 마친 후에 마침내 react-native link 실행할 수 있습니다. 그러면 글꼴이 올바른 디렉토리에 복사되고 iOS의 info.plist에 필요한 xml이 추가됩니다.
완료되면 전체 이름으로 모든 스타일시트에서 글꼴을 참조하여 글꼴을 사용할 수 있습니다. Text 요소에서 사용합시다.
import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));7단계: 물건 옮기기
React Native는 구성 요소 레이아웃에 Flexbox와 동일한 규칙을 사용합니다. 버튼을 화면 하단에 배치하고 싶다고 가정해 보겠습니다. TouchableOpacity 를 컨테이너 View 로 래핑하겠습니다.
<View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View> 이제 이미 정의된 다른 스타일과 함께 container 스타일을 정의해 보겠습니다.
container: { flex: 1, justifyContent: 'center', alignItems: 'center' } justifyContent 와 alignItems 에 집중합시다. 이 두 속성은 구성 요소가 기본 축과 보조 축을 따라 각각 정렬되는 방식을 제어합니다. 기본적으로 기본 축은 세로 축이고 보조 축은 가로 축입니다( flexDirection 속성을 row 로 설정하여 변경할 수 있습니다).
justifyContent 에는 다음과 같이 설정할 수 있는 6가지 값이 있습니다.
-
flex-start는 구성 요소의 경계 상자 시작 부분에 모든 요소를 함께 배치합니다. -
flex-end는 모든 요소를 끝에 배치합니다. -
center는 경계 상자의 중앙에 모든 요소를 배치합니다. -
space-around는 구성 요소를 고르게 펼치고 생성된 경계 상자의 중앙에 구성 요소를 배치합니다. -
space-evenly는 구성 요소도 고르게 퍼뜨리지만 구성 요소와 다른 경계 사이에 동일한 양의 공간을 남기려고 합니다. -
space-between은 인접한 구성 요소 사이의 간격을 동일하게 유지하여 구성 요소를 퍼뜨립니다.
alignItems 는 flex-start , flex-end , center 및 stretch 의 네 가지 가능한 값으로 설정할 수 있습니다. 처음 세 개는 justifyContent 에서와 같이 동작하는 반면 stretch 는 축을 따라 사용 가능한 모든 공간을 차지하도록 구성 요소를 설정하여 축이 완전히 채워집니다.
따라서 TouchableOpacity 가 아래쪽에 표시되고 수평 축을 따라 중앙에 표시되기를 원하므로 다음과 같이 스타일을 변경할 수 있습니다.
container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' } justifyContent 및 alignItems 값에 대한 자세한 정보는 여기와 여기에서 찾을 수 있습니다.
8단계: 애플리케이션 등록
브라우저용 React로 개발할 때 마운트 지점을 정의하고 React.render 를 호출하고 React가 마법을 수행하도록 하기만 하면 됩니다. React Native에서는 이것이 약간 다릅니다.
import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' })); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return <HelloThere name="Component" />; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; }); AppRegistry 개체를 사용하여 수행되는 사물의 Objective-C 측면에 대한 구성 요소를 등록해야 합니다. 우리가 부여한 이름은 Xcode 프로젝트 내부의 이름과 일치해야 합니다.
Hello World React Native 애플리케이션은 웹에 비해 훨씬 더 많은 코드 줄을 가지고 있지만, 반면 React Native는 특히 스타일이 구성 요소로 정의되기 때문에 문제를 조금 더 분리합니다.
참고로, 특히 render (네이티브) 애플리케이션이 좀 더 복잡해 clickMe 메서드를 this 컨텍스트에 다시 바인딩해서는 안 됩니다. 그것은 꽤 많이 될 수있는 모든 렌더링 호출에서 메서드를 다시 바인딩합니다. 대안은 생성자 내부에서 메서드를 바인딩하는 것입니다.
애플리케이션 실행
애플리케이션을 실행하려면 index.ios.js 파일의 내용을 마지막 단계에서 변환된 애플리케이션의 코드 조각으로 교체해야 합니다. 그런 다음 Xcode 프로젝트를 열고 큰 실행 버튼을 누르기만 하면 됩니다. 먼저 React Native 서버와 함께 터미널이 열리고 시뮬레이터 창이 나타납니다. React Native 서버는 기본 애플리케이션이 가져올 번들을 생성합니다. 이를 통해 변경 사항이 시뮬레이터에 거의 즉시 반영되는 웹 개발과 같은 빠른 개발 주기가 가능합니다.
Android의 경우 scripts 아래에서 package.json 파일에 다음을 추가하는 것으로 충분합니다.
"android-linux": "react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android" 그런 다음 npm run android-linux 를 실행합니다. android/app/src/main/assets 디렉토리가 미리 존재하는지 확인하십시오.
터미널이 팝업되면 애플리케이션이 시뮬레이터에 표시됩니다. CMD+D를 누르면 개발 메뉴가 표시됩니다. 상자를 클릭하면 경고가 표시됩니다. iOS 버전:
Android는 다음과 같이 렌더링합니다.
배포의 경우 로컬 개발 서버를 가리키는 애플리케이션을 갖는 것은 우리에게 적합하지 않을 것입니다. 이러한 이유로 react-native bundle 명령으로 React Native 서버가 실행되고 있지 않을 때 사용할 번들을 만들 수 있습니다. 이 경우 오프라인 번들을 사용하도록 AppDelegate 의 didFinishLaunchingWithOptions 메소드를 업데이트해야 합니다.
이 예제 애플리케이션은 Github에서도 사용할 수 있습니다.
React Native로 작업하기
언급할 가치가 있는 또 다른 사항은 모바일 애플리케이션에 React 개념과 JavaScript를 사용할 뿐만 아니라 웹 개발자에게 익숙한 일부 워크플로를 React Native에서도 사용할 수 있다는 것입니다. 웹 개발에서 왔을 때 우리는 도구를 개발하고 요소를 검사하고 실시간으로 다시 로드하는 데 익숙합니다.
React Native가 작동하는 방식은 모든 JavaScript 파일을 번들에 넣는 것입니다. 이 번들은 서버에서 제공되거나 애플리케이션과 함께 번들로 제공됩니다. 첫 번째는 실시간 다시 로드를 활성화할 수 있으므로 시뮬레이터 개발에 매우 유용합니다. React가 제공하는 개발자 메뉴는 Chrome 개발자 도구만큼 강력하지는 않지만 Chrome(또는 Safari) 개발자/디버거 도구를 사용하여 라이브 다시 로드 및 디버깅을 통해 매우 웹과 같은 개발자 경험을 제공합니다.
웹 개발자는 빠른 웹 테스트를 위한 온라인 놀이터인 JSFiddle 또는 JSBin에 익숙합니다. 웹 브라우저에서 React Native를 사용해 볼 수 있는 유사한 환경이 있습니다.
React Native: 견고하고 현대적인 선택
나는 원래 React Native에 대해 더 신중한 접근 방식을 제안했습니다. 오늘날 그것은 성숙하고 확고한 선택입니다.
React의 가장 큰 장점 중 하나는 뷰 레이어를 나타내기 때문에 워크플로에 영향을 주지 않는다는 것입니다. 자신만의 Grunt 파이프라인을 정의하시겠습니까? 아니면 Webpack을 사용하시겠습니까? 그리고 모델 요구 사항에 Backbone.js를 사용하시겠습니까? 아니면 일반 JavaScript 객체를 사용하시겠습니까? React는 이러한 선택에 제한을 두지 않기 때문에 이 모든 질문에 대한 답은 전적으로 귀하에게 달려 있습니다. 공식 사이트에 따르면 "React는 나머지 기술 스택에 대해 가정하지 않기 때문에 기존 프로젝트의 작은 기능에서 쉽게 시도할 수 있습니다."
어느 정도 이것은 React Native에도 해당됩니다. 모바일 개발자는 React Native를 애플리케이션의 일부로 통합하고, 웹에서 영감을 받은 개발 워크플로를 활용하고, 필요한 경우 라이브러리를 더 큰 규모로 통합하도록 선택할 수 있습니다.
어쨌든 한 가지 확실한 것은 React Native가 사라지지 않는다는 것입니다. Facebook은 앱 스토어에 여러 React Native 기반 애플리케이션을 보유하는 데 막대한 지분을 가지고 있습니다. React Native 주변의 커뮤니티는 거대하고 계속해서 성장하고 있습니다.