react-native 시작하기

React Native는 Javascript를 기반으로 하여 Android 및 iOS 어플리케이션을 개발 할 수 있게 해주는 프레임 워크 입니다. 이름에서 알 수 있듯이 React와 유사한 컴포넌트를 기반으로한 구조를 가지고 있습니다. 지금 부터 이러한 react-native의 기본 시작 방법을 순서대로 설명해 보겠습니다.

 

일단 기본적인 개발환경에 필수인 node 및 android studio, xcode의 설치방법은 생략하고 넘어가겠습니다.

node의 설치 및 버전 관리방법은 다른 글에서 참고해 주시면 감사하겠습니다.

https://challeee.tistory.com/6

nvm 으로 window, Mac 노드 버전 관리하기

 

1. expo vs react-native-cli

expo는 react-native를 시작할 때 보다 쉽게 시작하기위해 이런저런 설정들을 미리 해놔서 보다 편하게 할 수 있도록 한 스타터 팩 같은 느낌이라고 보면됩니다.

1-1. expo 장점

• 자주 사용하는 설정들을 미리 해놓아서 처음 상요하기 편하다
• 시작 뿐만아니라 후에 배포하고 관리하는 부분까지 도와준다

1-2. expo 단점

• 틀을 미리 잡아 놓은만큼 사용자가 원하는데로 커스터마이징 하는데에 한계가 있다.
• 사용하지 않는 부분까지 처음 설정에 포함되어있어서 앱 사이즈가 커진다
• 라이브러리 중에 expo를 지원하지 않는 라이브러리가 존재한다.

1-3. 결론

사실 작거나 적당한 사이즈의 프로젝트라면 expo를 사용해도 전혀 문제가 없습니다. 하지만 프로젝트가 커지고 서비스에서 활용하고자 하는 기능이 많아질 수록 expo의 단점은 더욱 명확해 집니다.(필자의 경우 필수 라이브러리를 지원을 안해서 cli가 필수였다.) 그러니 왠만하면 cli로 처음 시작하는게 좋을 것 같다는 개인적인 견해 입니다.

 

 

2. react native cli 설치

가장 먼저 react native 명령어를 사용 할 수 있는 cli(command-line interface)를 설치해줍니다. 당연하게 cli는 글로벌로 설치 해 줍니다.

npm install -g react-native-cli

 

그런다음 react-native의 기본 빈 프로젝트를 시작해 줍니다.

react-native init [projectName]

이러면 프로젝트가 생성 됩니다

 

 

만약 아래와 같은 에러가 발생한다면

TypeError : cli.init is not a fuction

전역으로 설치되어있는 cli와 react native 버전이 맞지 않아서 발생하는 문제라고 합니다. react native 공식 문서에는 이러한 문제때문에 cli를 글로벌로 설치하는걸 권장하지 않는다고 하지만 필자는 로컬로 설치해도 해당 에러가 발생해서 cli는 그냥 편하게 글로벌로 설치하고 init할 때 react-native 버전을 낮춰서 설치하였습니다.

react-native init devProject --version 0.68.5

 

 

3. android 빌드

프로젝스 생성이 완료 되었으면 해당 프로젝트로 들어가 android로 빌드해보겠습니다. usb로 실제 디바이스와 연결해도 되고 android studio에서 emulator로 실행해도 됩니다.

cd [프로젝트 이름]
npm run android

 

android 빌드가 성공했습니다. 

 

 

4. iOS 빌드

android 빌드에 성공했으니 ios 빌드를 해보겠습니다. ios 빌드 할때는 먼저 ios 폴더로 이동 후 podfile을 생성해줘야 합니다.

cd ios
pod install

이 작업은 처음 프로젝트를 빌드하거나 새로운 plugin을 설치 했을때 필수로 실행해 줘야 하는 작업입니다. cocoapods은 애플 플랫폼에서 라이브러리들의 의존성 관리를 해주는 도구 인데 cocoapods에 대한 자세한 내용은 내용은 글이 너무 방대하니 여기서는 생략하겠습니다. 

 

다시 프로젝트 메인 디렉토리로 돌아와서 ios 빌드를 실행을 해 줍니다.

cd ../
npm run ios

 

ios 빌드도 완료 되었습니다. 자 이제 우리도 react native 개발자 입니다!

 

사실 개발환경 설정만큼 이상스리한 오류들이 많이 발생하는 작업도 드뭅니다. 혹시 시작하시던 중 어려운 부분이 있으시면 댓글 달아주시면 같이 고민해서 알려드리도록 하겠습니다.

글에 잘못된 부분이나 고쳤으면 하는 부분이 있다면 피드백은 언제나 환영합니다.