리액트 네이티브 React Native 란?

리액트 네이티브란?

페이스북에서 만든 오픈 소스 모바일 애플리케이션 프레임워크

자바스크립트라는 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼

 

 

리액트 네이티브를 활용해서 만들어진 앱

페이스북, 에어비앤비, 우버이츠, 인스타그램 등 다양한 앱들이 리액트 네이티브를 통해 구현되었다. (링크 참조)

 

 

리액트 네이티브의 장점

• ios, 안드로이드를 동시에 개발하기 쉬움
• 러닝 커브가 낮다 (리액트를 할 줄 안다면 아주 쉽게 개발 가능)
• 핫 리로드, 라이브 리로드를 활용하면 수정하면 바로 반영된다!!
• 스타일을 플렉스 기반으로 해놓는 것이 모바일로 오픈하기 수월하다

 

리액트 네이티브의 단점

• 유지보수가 힘들다 (프레임워크라서)
• 아직 출시된지 얼마 안돼서 라이브러리와 레퍼런스가 부족함
• 복잡한 UI구현이 힘듬
• 안드로이드와 IOS의 UI가 다르기 때문에 어쩔 수 없이 한 쪽에 맞춰가야하는 부분이 생기게 됨

 

리액트 네이티브 실전

codepen 처럼 따로 설치 없이 웹사이트에서 리액트 네이티브를 사용해볼 수 있는 사이트는 스낵 이 있다.

또는 구름IDE를 사용하면 리액트 네이티브 관련 모든 모듈이 설치된 가상 컴퓨팅 환경에서 실험해볼 수 있다.

요기서 IDE (Integrated Development Environment) 란 통합 개발 환경을 뜻함

 

위의 예시는 쉽게 사용해볼 수 있는 사이트이며 리액트 네이티브는 아래와 같이 2가지 개발 방법이 있다.

 

1. Expo CLI

모바일 develope이 처음이라면 가장 쉬운 방법이다.

 

2. React Native CLI

이미 모바일 개발 경험이 있다면 이것을 사용하도록

이것은 Xcode (ios)와 Android Studio(android)를 필요로 한다.

 

하지만 Expo를 실무에서는 잘 쓰지 않는다고 한다.

이유는 개발이 더 편한 반면, 결과물의 용량이 크고, expo에서 제공하는 라이브러리가 아니면 사용할 수 없기 때문.

그래서 다들 처음엔 expo로 시작을 하지만 결국에는 사용하지 않는다고 한다.

(백엔드 담당이었어서 이해가 안되는 상태에서 스쳐들은 말이지만
기업협업했던 곳에서도 expo를 안쓰는 이유에 대해 비슷한 이야기를 들은 듯)

 

 

하지만 리액트 네이티브가 어떤 것인지 맛보기용으로는 Expo가 제격일 듯 해서 첫 시작은 Expo로 도전해보았다.

Expo 설치 방법은 공식 문서 튜토리얼을 참고 했다.

 

1. 먼저 계정을 생성할 것 (https://expo.io/)
2. 그리고 공식문서를 참조해 설치를 완료한다. https://docs.expo.io/get-started/installation/

 

그리고 npm start를 하면 요런 웹 브라우저가 뜬다.

 

이 화면에서 왼쪽의 Run in web browser를 클릭하면 작성한 코드를 웹 화면에서 볼 수 있다!

 

바로 요렇게~~

 

 

리액트 네이티브의 신기함을 느끼려면 여기서 끝이 아닌데!

먼저 앱스토어/구글플레이스토어에서 Expo를 다운받는다

 

그리고 앞서 기본 카메라 어플을 켜서 위 웹사이트에 뜨는 QR코드를 찍으면

 

 

요렇게 스마트폰에서도 같은 화면을 확인할 수 있다.

 

서버만 켜놓으면 바로바로 수정사항이 연동되어서 아주 편한 것

+ 스마트폰에서 expo 를 켜고, 몇 번 흔들면 개발자 모드로 들어갈 수 있음!

 

 

 

 

 

 

 

참고한 블로그들

https://firework-ham.tistory.com/102