React Native 소개 및 개발 환경 설정

참고 https://reactnative.dev/docs/getting-started

소개

 

-  JavaScript 기본 사항에 대한 이해가 필요

핵심 구성 요소 및 기본 구성 요소

React Native 는 React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크임

React Native를 사용하면 JavaScript를 사용하여 플랫폼의 API에 액세스하고 React 구성 요소를 사용하여 UI의 모양과 동작을 구현함

뷰 및 모바일

Android 및 iOS 개발에서 뷰 는 UI의 기본 빌딩 블록임

텍스트, 이미지를 표시하거나 사용자 입력에 응답하는 데 사용할 수 있는 화면의 작은 직사각형 요소임

한 줄의 텍스트나 버튼과 같은 앱의 가장 작은 시각적 요소도 일종의 뷰임

기본 구성 요소

Android 개발에서는 Kotlin 또는 Java로 보기를 작성하고, iOS 개발에서는 Swift 또는 Objective-C를 사용함

React Native를 사용하면 React 구성 요소를 사용하여 JavaScript로 이러한 뷰를 호출할 수 있음

런타임 시 React Native는 해당 구성 요소에 해당하는 Android 및 iOS 뷰를 생성함

React Native 구성 요소는 Android 및 iOS와 동일한 뷰에서 지원되기 때문에 React Native 앱은 다른 앱과 같은 모양, 느낌 및 성능을 제공함

이러한 플랫폼 지원 구성 요소를 기본 구성 요소라고 함

 

React Native는 지금 바로 앱 빌드를 시작하는 데 사용할 수 있는 필수 기본 구성 요소 세트와 함께 제공함

이것은 React Native의 핵심 구성 요소 임

 

React Native를 사용하면 앱의 고유한 요구 사항에 맞게 Android 및 iOS용 기본 구성 요소를 빌드할 수 있음

 

커뮤니티 Native Directory  에 기여 구성요소를 보유하고 있음 (3rd party 요소)

 

핵심 구성 요소

API 섹션에 모두 문서화되어 있음. 주로 다음 핵심 구성 요소로 작업함

React Naive UI 요소	안드로이드 뷰	IOS뷰	웹	설정
<View>	<ViewGroup>	<UIView>	스크롤이 없는<div>	레이아웃을 지원하는 컨테이너
<Text>	<TextView>	<UITextView>	<p>	텍스트 문자열을 표시
<Image>	<ImageView>	<UIImageView>	<img>	이미지를 표시
<ScrollView>	<ScrollView>	<UIScrollView>	<div>	여러 구성 요소와 뷰를 포함할 수 있는 일반 스크롤 컨테이너
<TextInput>	<EditText>	<UITextField>	<input type="text">	사용자가 텍스트를 입력할 수 있음

핵심 구성 요소를 결합하여 React가 어떻게 작동하는지 보여주는 예시

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
}

export default App;

개발 환경 설정

참고 https://reactnative.dev/docs/environment-setup

 

모바일 개발이 처음인 경우 시작하는 가장 쉬운 방법은 Expo CLI를 사용 추천

Expo는 React Native를 기반으로 구축된 도구 세트임

Expo는 많은 기능 이 있으며, 몇 분 안에 React Native 앱을 작성할 수 있다는 것이 장점이며 최신 버전의 Node.js와 전화 또는 에뮬레이터만 있으면 됨

Expo는 웹 브라우저에서 React Native를 직접 사용해 볼 수 있는 Snack 을 제공

 

모바일 개발에 이미 익숙하다면 React Native CLI를 사용하는 것 추천하며, Xcode 또는 Android Studio가 필요함

이러한 도구 중 하나가 이미 설치되어 있는 경우 몇 분 안에 시작하여 실행할 수 있음

 

1. React Native CLI - Android 개발 환경 설정

개발 OS: Windows

Target OS: Android

종속성 설치

Node, React Native CLI, JDK 및 Android Studio가 필요

 

Node / JDK 설치

- Windows용으로 널리 사용되는 패키지 관리자인 Chocolatey 를 통해 Node를 설치하는 것 추천

choco install -y nodejs-lts openjdk11

이미 설치되어 있다면, Node 14이상, JDK 버전 11 이상인지 확인

 

최신 버전의 Java Development Kit를 사용하는 경우 JDK를 인식할 수 있도록 프로젝트의 Gradle 버전을 변경해야 함

{project root folder}\android\gradle\wrapper\gradle-wrapper.properties 이동하여 distributionUrl값을 변경하여 Gradle 버전을 업그레이드하면 됨 ( 여기에서 Gradle의 최신 릴리스를 확인 )

 

node.js 업그레이드 방법 참고 ( https://jsikim1.tistory.com/158 )

윈도우에서 jdk 11 설치 방법 ( https://zetawiki.com/wiki/%EC%9C%88%EB%8F%84%EC%9A%B0_OpenJDK_11_%EC%84%A4%EC%B9%98 )

 

Android Studio 설치되어 있지 않다면 설치

 

React Native CLI

React Native에는 명령줄 인터페이스가 내장되어 있음

특정 버전의 CLI를 전역적으로 설치하고 관리하는 대신 Node.js와 함께 제공되는 npx를 사용하여 런타임 시 현재 버전에 액세스하는 것 추천. 그러면 npx react-native <command>명령이 실행될 때 CLI의 현재 안정적인 버전이 다운로드되어 실행됨

 

앱 프로젝트 생성

npx react-native init AwesomeProject

프로젝트 생성

>npx react-native init ReactNativeCoolProject

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
Need to install the following packages:
  react-native
Ok to proceed? (y) y
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-shallow-renderer@16.14.1
npm WARN Found: react@18.0.0

....

npm notice
npm notice New minor version of npm available! 8.11.0 -> 8.13.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.13.2
npm notice Run npm install -g npm@8.13.2 to update!
npm notice

실행

npx react-native run-android