THEWOOWON

React Native Getting Started

January 15, 2023 - 우원

리액트 네이티브를 시작하기 전

리액트를 공부하다 보니, 리액트 네이티브에 자연스레 관심이 생겼다. 그리고 리액트 네이티브도 꾸준히 공부할 결심을 했다. 역시 시작이 가장 힘들다고 했던가, 리액트 네이티브를 시작하는데 있어서도 그렇다. 스마트폰이 등장하고 모바일 운영체제는 안드로이드 진영과 IOS 진영으로 나뉘어져 있었다. 그리고 이 두 진영은 서로 다른 언어로 개발을 해야 했다. 안드로이드는 코틀린, IOS는 스위프트를 사용했다. 두 플랫폼이 정형화되고, 일반화되면서 두 플랫폼을 잇는 시도가 있었고, 그 결과가 리액트 네이티브이다. 물론 리액트 네이티브 외에도 플러터나 네이티브스크립트, 아이오닉 등이 이미 있고, 커뮤니티의 규모는 일반 자바스크립트 커뮤니티보다는 작지만, 꾸준히 성장하고 있다.

현재의 개발은 SaaS 플랫폼이나, 웹 애플리케이션을 개발하는 것이 주를 이루고 있다. 그리고 개발을 진행할 때 모바일 퍼스트의 개발 방식이 주를 이루고 있다. 모바일에 최적화된 플랫폼을 우선적으로 제작하고 웹에 최적화된 플랫폼을 제작하는 것이다. 모바일의 파급력이 커지면서, 웹에 최적화된 플랫폼을 모바일에 최적화된 플랫폼으로 바꾸는 것이 어쩌면 당연시 되고 있다. 그리고 이러한 모바일 퍼스트의 개발 방식은 웹 개발자들에게도 큰 도움이 될 것이다. 왜냐하면 개발 역량의 향상이라는 점에서 말이다. 물론 배워야하는 것이 많아지고, 개발의 범위가 넓어지는 것은 사실이다. 하지만 전문적인 지식의 확장이라는 개념이 너무나 멋있고, 매력적이다.

크로스 플랫폼 개발

크로스 플랫폼 개발의 장점은 다음과 같다.

  • 개발자의 역량 향상
  • 개발 시간 단축
  • 개발 비용 절감
  • 유지보수의 편의성

개발자의 역량 향상은 크로스 플랫폼 개발을 통해 웹 개발자들이 모바일 개발자의 역량을 향상시킬 수 있다. 그리고 모바일 개발자들이 웹 개발자의 역량을 향상시킬 수도 있다. 물론 이러한 역량 향상은 두 플랫폼을 모두 다룰 수 있는 개발자에게만 해당된다. 그렇지만 분명히 개발자의 가치를 높여줄 것이다.

단점도 존재한다. 기존 네이티브 앱이 가지고 있는 동적인 요소 퍼포먼스를 100% 구현할 수 없는 단점과 일반적으로 네이티브 앱에 비해 성능이 떨어져 느린점이 있다. 또한 라이브러리가 다양하지 않아 기능 구현이 어려운 점뿐만 아니라, 안드로이드와 iOS OS에 새로운 기능이 추가되면 네이티브 앱은 즉시 사용 및 업데이트가 가능하지만, 크로스 플랫폼 앱은 사용에 있어 업데이트 지연이 발생하는 단점이 있다.

하지만 이러한 단점들은 모두 해결될 수 있다. 모바일 퍼스트의 개발 방식이 더욱 발전하고, 크로스 플랫폼 개발의 기술이 발전하면서 크로스 플랫폼 개발의 단점들은 점점 해결될 것이다.

리액트 네이티브 본격 시작하기

리액트 네이티브를 본격적으로 시작하기 전에, 리액트 네이티브의 기본적인 개념을 알아보자.

리액트 네이티브의 기본 개념

리액트 네이티브는 리액트를 기반으로 한 네이티브 앱 개발 프레임워크이다. 그리고 자바스크립트를 사용하여 네이티브 앱을 개발할 수 있게 해준다. 놀라운 사실은 리액트 네이티브는 페이스북 내부 해커톤으로 시작되었다는 것이다. IOS의 UI 컴포넌트를 자바스크립트로 구현한 라이브러리를 만들었고, 이를 통해 IOS의 UI 컴포넌트를 자바스크립트로 구현할 수 있게 되었다.

리액트 네이티브의 구조

리액트 네이티브는 크게 3가지로 구성되어 있다.

  1. React Native Core
  2. React Native Bridge
  3. React Native Modules

React Native Core는 리액트 네이티브의 핵심적인 부분으로, 리액트 네이티브의 렌더링 엔진, 뷰, 스타일, 텍스트, 이미지 등의 컴포넌트를 포함한다.

React Native Bridge는 리액트 네이티브의 뷰를 네이티브 뷰로 변환하는 역할을 한다.

React Native Modules는 리액트 네이티브의 네이티브 모듈을 포함한다. 네이티브 모듈은 리액트 네이티브에서 제공하는 네이티브 기능을 사용할 수 있게 해준다.

리액트 네이티브의 특징

크로스 플랫폼 앱 개발 프레임워크는 크게 2가지로 나뉜다.

  1. 하이브리드 앱 개발 프레임워크
  2. 네이티브 앱 개발 프레임워크

하이브리드 앱 개발 프레임워크는 웹 기술을 사용하여 앱을 개발하는 방식이다. 웹 기술을 사용하기 때문에 하이브리드 앱 개발 프레임워크는 웹 기술에 익숙한 개발자가 쉽게 앱을 개발할 수 있다는 장점이 있다.

리액트 네이티브를 시작하기 위한 준비

리액트 네이티브 개발 환경 구축(공통)

Node.js는 리액트 네이티브를 실행하기 위한 환경이다. Node.js는 리액트 네이티브를 실행하기 위한 환경이기 때문에 리액트 네이티브를 사용하지 않더라도 Node.js를 설치해야 한다.

리액트 네이티브 개발 환경 구축(Windows)

JDK는 안드로이드 스튜디오를 실행하기 위한 환경이다. 안드로이드 스튜디오를 실행하기 위해서는 JDK가 필요하다.

Android Studio는 안드로이드 앱을 개발하기 위한 통합 개발 환경이다. 안드로이드 앱을 개발하기 위해서는 Android Studio가 필요하다.

리액트 네이티브 개발 환경 구축(에러이슈)

나도 겪은 오류로 react-native-cli를 전역으로 미리 설치하고 리액트 네이티브를 어플리케이션을 생성했을 때 에러가 발생했다. 그렇기 때문에 전역으로 설치한 패키지를 제거한다.

npm uninstall -g react-native-cli @react-native-community/cli

리액트 네이티브 개발 환경 구축(Mac)

Xcode는 iOS 앱을 개발하기 위한 통합 개발 환경이다. iOS 앱을 개발하기 위해서는 Xcode가 필요하다. 그리고 루비는 iOS 종속성 관리와 관련된 일부 스크립트에서 사용하기 때문에 리액트 네이티브에 맞게 설치해야 한다. 루비의 패키지 매니저는 gem이다. 추가로 cocoapods는 iOS 종속성 관리를 위한 도구이고 cocoapods를 사용하기 위해서는 루비가 필요하다. cocoapods이 루비로 만들어졌기 때문에 gem을 사용하여 cocoapods를 설치해야 한다.

리액트 네이티브 프로젝트 생성

사전 준비가 다 되었다면 리액트 네이티브 프로젝트를 생성해보자.

npx react-native init MyFirstRNApp

리액트 네이티브 프로젝트 생성(에러이슈)

리액트 네이티브 프로젝트를 생성하면서 에러가 발생했다.

✔ Downloading template
✔ Copying template
✔ Processing template
✖ Installing Bundler
error Your Ruby version is 2.6.8, but your Gemfile specified 2.7.6

✖ Installing Bundler
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
    at createFromTemplate (/Users/mac/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/commands/init/init.js:129:11)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.initialize [as func] (/Users/mac/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/commands/init/init.js:181:3)
    at async Command.handleAction (/Users/mac/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/index.js:106:9)
info Run CLI with --verbose flag for more details.

이 에러는 루비 버전이 맞지 않아서 발생한 에러이다. 루비 버전을 맞춰주면 된다. 나 또한 이 문제를 해결하기 위해서 스택오버플로우를 참고했다.

먼저 브루를 활용하도록 하겠다.

brew update brew install ruby-build brew install rbenv

먼저 brew를 업데이트하고 ruby-build와 rbenv를 설치한다.

rbenv install -l

rbenv install -l 명령어를 통해 설치 가능한 루비 버전을 확인한다.

(base) mac@MacBook-Pro-cua-MAC ~ % rbenv install -l
2.7.7
3.0.5
3.1.3
3.2.0
jruby-9.4.0.0
mruby-3.1.0
picoruby-3.0.0
rbx-5.0
truffleruby-22.3.0
truffleruby+graalvm-22.3.0

Only latest stable releases for each Ruby implementation are shown.
Use 'rbenv install --list-all / -L' to show all local versions.

원래는 리스트에 있는 버전을 설치하는 것이 맞지만 나는 2.7.6을 설치하겠다.

rbenv install 2.7.7 rbenv global 2.7.7

2.7.7을 설치하고 2.7.7을 전역으로 설정한다.

이제 rbenv의 버전을 확인해보자.

rbenv versions

(base) mac@MacBook-Pro-cua-MAC ~ % rbenv versions
  system
* 2.7.6 (set by /Users/mac/.rbenv/version)
  2.7.7

rbenv의 버전을 확인해보면 2.7.6이 설치되어있는 것을 확인할 수 있다. 이제 마지막으로 루비의 버전을 확인해보자.

ruby -v or ruby --version

(base) mac@MacBook-Pro-cua-MAC ~ % ruby -v       
ruby 2.6.8p205 (2021-07-07 revision 67951) [universal.arm64e-darwin21]

결과는 바뀌지 않고 2.6.8이 나온다. 이 때는 다음과 같이 해주면 된다.

rbenv init

(base) mac@MacBook-Pro-cua-MAC ~ % rbenv init
# Load rbenv automatically by appending
# the following to ~/.zshrc:

eval "$(rbenv init - zsh)"

.zshrc에 eval "$(rbenv init - zsh)"를 추가해주면 된다.

(base) mac@MacBook-Pro-cua-MAC ~ % echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc

이제 다시 루비의 버전을 확인해보자.

(base) mac@MacBook-Pro-cua-MAC ~ % ruby -v
ruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [arm64-darwin21]

루비의 버저닝이 잘 되었다. 다시 프로젝트를 생성해보자.

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing Bundler
✖ Installing CocoaPods dependencies (this may take a few minutes)
error warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.11.3/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md

하지만 안타깝게도 에러가 발생했다. 해당 에러는

여기

를 참고하면 해결할 수 있다.

다시 프로젝트를 생성해보자.

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing Bundler
✔ Installing CocoaPods dependencies (this may take a few minutes)

  
  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/Users/mac/dev/template" && npx react-native run-android
  
  Run instructions for iOS:
    • cd "/Users/mac/dev/template" && npx react-native run-ios
    - or -
    • Open template/ios/template.xcworkspace in Xcode or run "xed -b ios"
    • Hit the Run button
    
  Run instructions for macOS:
    • See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.

프로젝트가 성공적으로 생성되었다. 마지막은 프로젝트를 실행해보자.

spring

아이폰 시뮬레이터가 자동으로 실행되고 기능이 잘 작동하는 것을 확인할 수 있다.

spring
logo

우원 /

안녕하세요👏
우원입니다.
Email
Gihub
안녕하세요. 우원봇입니다.
logo