[개발 일지] React Native 도전기 (1)

📚 1. 사전 지식

React Native 공식문서

React vs React Native

React

: Facebook에서 만든 프론트엔드 Javscript 라이브러리

• DOM이 생성이 되고 난 후에 Virtual DOM을 이용하여 변화된 곳을 캐치하여 변화된 DOM으로 변경
  Virtual DOM 작동방식
• 화면 출력을 ReactDOM 사용
• JSX문법을 사용 : HTML문법

React-Native

: React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크

• Bridge를 이용하여 ios, android 각각의 네이티브 언어에 접근
• 화면 출력을 AppRegistry 사용
• JSX문법을 사용 but HTML 문법 X
• 기존으l CSS 지원 X, flexbox 이용한 레이아웃 제작 제공

 

 

React Native vs Flutter

참고 : React Native vs Flutter

React Native

• React Native로 만들어진 앱 : Facebook, walmart, 블룸버그, Web view, SoundCloud, Wix
• React를 사용하여 완전히 JS로 작성
• Flutter보다 역사가 오래 됨. 커뮤니티가 더 크고 참고할 자료가 많음
• 필요에 따라 네이티브 코드(ios,android 전용 코드)를 작성할 수 있음
• 모바일 장치 자체를 사용하는 어플리케이션을 제작하는 경우, 플러터에 비해 상대적으로 더 나은 성능 제어력 얻을 수 있음
• React를 배운 사람이라면 러닝커브가 낮음

Flutter

• 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크
• Dart 언어로 작성. JS만큼 인기 X
• 특유의 알고리즘, 렌더링 방식을 사용하여 뛰어난 성능과 속도로, 네이티브 앱과 유사한 경험 할 수 있음
• hot-reload, hot-restart 등 변경한 내용을 실시간으로 쉽게 반영

트렌드

• Flutter 75.4%, React Native 62.5%

---

🤩 2. 실제로 구현하기

1. 세팅

참고 : Mac에서 React Native세팅

위 링크에서 친절하게 설명하고 있어, 차근차근 따라하면 된다.

설치 필요한 것들

• Homebrew : Mac에서 필요한 패키지를 설치하고 관리하는 Mac용 패키지 관리자
• rbenv : Ruby를 버전별로 설치하고 관리할 수 있게 도와주는 툴 
  # React Natvie는 Ruby 버전 2.7.5가 필요
• Nodejs : Javascript 런타임
  # NPM : Node Package Manager
• watchman : 특정 폴더나 파일을 감시하다가 변화가 생기면, 특정 동작을 실행하도록 설정
• React Native CLI
• Xcode : iOS 개발 툴
• Cocoapods : iOS개발에 사용되는 의존성 관리자
• JDK(Java Development Kit)
• 안드로이드 스튜디오 : 안드로이도 개발 툴

이제 프로젝트를 생성해보자.

$ npx react-native init SampleApp

$ cd SampleApp

$ npm install

2. iOS 실행

node_modules까지 설치가 완료되었다면, iOS부터 실행해보자.

$ npm run ios

실행했을 때 처음에 'Multiple Podfiles were found'라는 오류가 발생할 수 있다. 그렇다면, 링크를 참고하길 바란다.

위 화면처럼 실행이 되면 성공한 것이다.

 

3. Android 실행

$ npm run android를 입력하면 안드로이드 환경에서 실행이 된다.

 

---

🤔 2. 느낀 점 / 배운 점 / 추가로 공부할 것

이전에 웹 앱 프로젝트를 진행한 경험이 있다. 당시에는 휴대폰에 최적화된 서비스를 개발하려 했지만, 웹사이트의 한계로 인해 컴퓨터에서 사용할 때와 같은 부드러운 UI/UX를 제공하지 못했다. 이 부분이 상당히 큰 아쉬움으로 남아있다. React Native는 React의 휴대폰 최적화 문제를 해결해주며, 휴대폰의 카메라, GPS 등 기능을 더 편리하게 사용할 수 있는 큰 이점이 있다고 생각한다.

React Native를 접한 후로 다양한 도전을 해보고 싶은 욕구가 생겼다. React Native로 앱 출시를 시도해 보고 싶고, 이전 프로젝트를 React Native로 마이그레이션해보는 것도 궁금하다. 또한, React Native의 웹뷰를 활용하여 React를 사용해보고 싶다. 앞으로 이러한 도전을 시도하며 그 경험을 포스팅해 나가겠다 ㅎㅎ.