분류 Reactjs

React에서 React Native로

컨텐츠 정보

  • 조회 395 (작성일 )

본문

모바일 개발 시작하기


Image for post 


https://medium.com/better-programming/from-react-to-react-native-5d884a1632d7 


내 경험상 네이티브 안드로이드 개발에서 React Native로 전환하는 것은 단순히 즐거움이었습니다. 일반적으로 유연성은 떨어지지만 개발 속도는 훨씬 빠르며 깨끗하다고 ​​생각합니다. 더 이상 고민하지 말고 시작합시다.


React Native 란 무엇입니까? 


React Native는 React 라이브러리와 함께 작동하여 기본 구성 요소를 iOS 또는 Android 디바이스로 렌더링 하는 라이브러리입니다. 따라서 React Native에 뛰어들려면 React에 대한 지식이 필요합니다.


왜 React Native합니까? 


가장 큰 장점은 크로스 플랫폼 개발에 있습니다. React Native를 사용하면 iOS 및 Android 장치 모두에 대해 빌드할 수 있는 단일 코드베이스가 있습니다. 네이티브 모바일 개발에는 두 개의 서로 다른 코드베이스와 두 개의 서로 다른 팀 (스위프트에서 네이티브 iOS 개발, Java / Kotlin에서 네이티브 안드로이드 개발)이 필요하므로 대부분의 회사에서 많은 시간과 비용을 절약 할 수 있습니다.

특히 JavaScript를 알고 있지만 Swift, Java 또는 Kotlin은 모르는 개발자인 경우 빠른 배송 시간 (즉, 새로운 언어 및 개발 환경을 배우는 데 걸리는 시간) 때문에 React Native를 사용하여 모바일 앱을 개발하는 것이 합리적입니다. ).


플랫폼 간 개발을 위한 또 다른 새로운 프레임 워크는 Google이 만든 오픈 소스 UI 툴킷인 Flutter입니다. 내가 아는 유일한 단점은 Dart 언어를 사용하므로 (배우는 데 시간을 소비해야 함) 비교적 새롭기 때문에 커뮤니티 지원이 그리 많지 않을 수 있다는 것입니다.

그러나 앞으로 Flutter를 플랫폼간 개발의 새로운 주류 방식으로 볼 수 있으므로 시간이 있으면 학습 할 가치가 있다고 생각합니다. 그러나 현재로서는 React Native가 여전히 이 크로스 플랫폼 비즈니스의 왕입니다.


Components 


React Native는 모바일 장치에서 뷰를 렌더링 하는 데 사용할 수 있는 내장 컴포넌트 및 API를 제공합니다. 이러한 컴포넌트는 일반적인 React 웹 앱 개발에서 사용하는 것과 동일한 방식으로 사용됩니다.


최신 버전에서는 구성 요소가 추가, 제거 또는 업데이트 될 수 있으므로 React Native 구성 요소에 대한 최신 설명서를 확인하십시오. 사용 시기와 방법을 자세히 볼 수도 있습니다.


빠른 시작 및 설정 


React Native 개발 환경을 설정하는 방법에는 두 가지가 있습니다. 특히 초보자에게는 Expo CLI를 사용하는 것이 좋습니다. 빠르고, 설정하기 쉽고, 개발하기가 쉽습니다. 또한 필요할 때마다 언제든지 "꺼내기"하여 React Native CLI로 이동할 수 있습니다.


그러나 유연성과 성능을 더 중요하게 평가하는 가파른 학습 곡선에 신경 쓰지 않는다면 React Native CLI가 적합 할 것입니다.


Expo CLI 


Node 12 LTS 이상이 설치되어 있다고 가정하면 npm을 사용하여 Expo CLI 명령행 유틸리티를 설치할 수 있습니다.


npm install -g expo-cli 


그런 다음 다음 명령을 실행하여“AwesomeProject”라는 새로운 React Native 프로젝트를 작성하십시오.


expo init AwesomeProject
cd AwesomeProject
npm start # you can also use: expo start 


개발 서버가 시작됩니다.


Google Play Store 또는 App Store에서 검색하여 모바일 장치에 Expo를 설치하고 표시된 QR 코드를 스캔하면 됩니다. 앱이 코드를 컴파일하게 하고 몇 초 안에 앱이 기기에서 실행되고 있는 것을 볼 수 있습니다! 그렇게 쉽습니다.


React Native CLI 


시작하려면 먼저 Xcode 또는 Android Studio를 설치해야 합니다. 설치하고 구성하지 않은 경우 한 시간 정도 소요될 것으로 예상됩니다. 설정 한 후 다음 명령을 사용하여 앱을 만들 수 있습니다.


npx react-native init AwesomeProject 


그런 다음 USB 디버깅이 활성화 된 상태에서 iOS 또는 Android 장치 (또는 가상 장치와 연결)를 연결하고 간단히 실행하십시오.


Android 


npx react-native run-android 


iOS 


npx react-native run-ios 


각 환경 설정에 대한 자세한 내용은 공식 설명서를 참조하십시오.


React Native의 새로운 기능 


일반 React와 React Native의 주요 차이점은 Flexbox의 스타일과 사용법입니다. 게다가 div 대신 View 또는 ScrollView 구성 요소를 사용하는 것과 같이 ReactJS에서 React Native로 빠르게 전환됩니다.


Styling 


React Native에서는 JavaScript를 사용하여 애플리케이션의 스타일을 지정합니다. 대부분의 구성 요소는 스타일이라는 prop을 받습니다. 기본적으로 이름이 낙타 케이싱 (예 : background-color이 아닌 backgroundColor)을 사용하여 작성되는 것을 제외하고는 대부분 웹에서 CSS가 작동하는 방식을 따르는 스타일 이름과 값을 지정하는 JavaScript 객체입니다.


참고 : Button 구성 요소와 같은 일부 구성 요소의 스타일은 작동하지 않습니다. 따라서 단추의 스타일을 지정하려면 단추를 View 구성 요소 아래에 배치하고 해당 View 구성 요소의 스타일을 지정하십시오.


StyleSheet.create를 사용하여 한 곳에서 여러 스타일을 정의하고 styles.container를 한 스타일 prop으로, style.blueHeader를 다른 스타일 prop으로 전달하는 것이 더 깔끔합니다. 예를 들면 다음과 같습니다.


const styles = StyleSheet.create({
container: {
marginTop: 50,
},
blueHeader: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});


Flexbox 


React Native에서 Flexbox는 다양한 화면 크기에 맞는 반응 형 디자인을 제공하는 데 사용됩니다. 보다 일반적인 속성 중 일부가 아래에 설명되어 있습니다. 모든 것은 공식 문서에서 더 자세히 볼 수 있습니다.


설명서에 따르면 "flex는 항목이 기본 축을 따라 사용 가능한 공간을 어떻게 채우는 지"정의합니다.


예를 들어, 빨간색 보기는 flex : 1을 사용하고 노란색 보기는 flex : 2를 사용하고 녹색 보기는 flex : 3을 사용합니다. 1 + 2 + 3 = 6은 공간의 1/6을 가져 오는 빨간색 보기로 변환됩니다. 스페이스의 노란색 보기 2/6, 스페이스의 녹색 3/6.


Image for post 

flexDirection은 노드의 자식이 배치되는 방향을 제어하고 주축을 나타냅니다. 십자 축은 주축에 수직인 축입니다.


  • column (기본값) : 자식을 위에서 아래로 정렬합니다.
  • column-reverse : 하위를 위에서 아래로 정렬합니다.
  • row : 자식을 왼쪽에서 오른쪽으로 맞춥니다.
  • row-reverse : 어린이를 오른쪽에서 왼쪽으로 맞춥니다.

justifyContent는 컨테이너의 기본 축 내에서 자식을 정렬하는 방법을 설명합니다.

  • flex-start (default value): 컨테이너의 하위 축을 컨테이너의 기본 축 시작에 맞춥니다.
  • flex-end: 컨테이너의 자식을 컨테이너의 기본 축 끝에 맞춥니다.
  • center: 컨테이너의 기본 축 중심에 컨테이너의 자식을 정렬합니다.
  • space-between: 용기의 주축을 가로 질러 어린이들에게 균등 한 간격을 두고 어린이들 사이에 남은 공간을 분배하십시오.
  • space-around: 용기의 주축을 가로 질러 어린이들에게 균등 한 간격을 두고 어린이들에게 남은 공간을 분배하십시오. 공백을 사용하는 것과 비교하여 공백을 사용하면 첫 번째 자식의 시작 부분과 마지막 자식의 끝 부분에 공간이 분산됩니다.
  • space-evenly: 주축을 따라 정렬 컨테이너 내에 어린이를 균등하게 분배합니다. 인접한 항목의 각 쌍 (메인 시작 가장자리와 첫 번째 항목, 메인 끝 가장자리와 마지막 항목) 사이의 간격은 정확히 같습니다.

Image for post 


alignItems는 컨테이너의 가로 축을 따라 자식을 정렬하는 방법을 설명합니다.

  • stretch (default value): 컨테이너의 어린이를 스트레칭 하여 컨테이너의 가로축 높이에 맞춥니 다.
  • flex-start: 컨테이너의 자식을 컨테이너의 교차 축 시작에 맞춥니다.
  • flex-end: 컨테이너의 자식을 컨테이너의 가로축 끝에 맞춥니다.
  • center: 컨테이너의 자식을 컨테이너의 가로 축 중심에 맞춥니다.


문서에 따르면 :


“flexWrap은 컨테이너에 설정되어 있으며 주축을 따라 컨테이너 크기가 오버플로 될 때 발생하는 상황을 제어합니다. 기본적으로 자식은 한 줄로 만들어집니다 (요소를 축소 할 수 있음). 줄 바꿈이 허용되면 필요한 경우 항목이 기본 축을 따라 여러 줄로 줄 바꿈 됩니다." 


Image for post