[React Native] Hello World! 개발환경 세팅하기

 

React Native 를 시작하게 된 계기

일전에 ios 도 끄적끄적해보면서 순도 100% 의 Native 앱 개발도 공부해보긴 했지만, 아무래도 플랫폼 Free 한 모바일 서비스를 만들어보고 싶은 호기심이 생겼다. RN 에 대해서는 이름만 들어본 수준이었지만 어렵지 않다는 말에 혹해서 (그럼에도 불구하고 나한테는 어렵겠지..ㅠㅠ) 도전해보게 되었다. RN 이 좋은지 Vue 가 좋은지 뭐 이것저것 여러 글들을 보긴 했지만 나의 목표는 대단한 개발을 해보고 싶은 것은 아니었기에 요즘 제일 인기가 많고 범용적으로 쓰인다는 RN 을 해보기로 했다. 그러나 RN 에 대해서는 자료가 얼마 없고 그마저도 빠르게 바뀌는 FE 프레임워크 세계에서 Outdated 된 자료가 많았다. 

 

 

RN 에 대한 첫인상

재밌다. 그리고 신기하다.

js 를 초보수준 정도로 아는 나에게 RN & expo 의 조합은 '오 나도 할 수 있겠는데' 라는 인상을 주었다. 그리고 가장 신기했던 것은 안드로이드, ios 플랫폼을 넘나들며 (xcode 와 android studio 가 없어도) 시뮬레이팅을 실시간으로 할 수 있다. (짱 신기해)

 

 

개발환경 세팅하기

본격적으로 RN 을 시작하기 위해 개발환경을 세팅해보자. 우선 RN 공식 홈페이지를 찾아가보았다. https://reactnative.dev/docs/environment-setup Node LTS version 이 12 이상을 권하니 터미널에서 아래 명령어를 통해 지금 현재 버전을 확인해보았다. 

node -v

나는 10 이어서 nodejs 페이지 https://nodejs.org/en/download/ 로 넘어가 최신 버전을 받았다. 그 다음에는 Expo 툴을 설치하러 고고.

 

 

Expo 란 무엇인가

Expo 는 RN 으로 쉽게 개발할 수 있게 도와주는 툴이다. Xcode 나 Android Studio 가 없어도 Expo 를 통해 실시간으로 시뮬레이션이 가능하다. (너무 편하다.) https://expo.io/ 로 가입을 하고 모바일에도 Expo 앱을 깔자. 그리고 아래 명령어를 통해 Exp CLI 도 인스톨! 

npm install -g expo-cli

그러면 기본적인 준비는 끝난 셈이다. 이제 프로젝트를 생성할 디렉터리로 이동하여 expo 를 실행해보자. 내 서비스 이름은 weatherapp 이다.

expo init weatherapp

명령어를 실행하면 3가지 종류로 프로젝트를 생성할 수 있는데, 나는 blank 를 선택했다.

 

 

Hello World! 출력하기

나는 VSCode 를 사용하여 생성된 RN 프로젝트의 구성을 살펴보았다. app.json 은 configuration 파일, app.js 는 기본적인 RN Component 가 포함되어 있는 템플릿으로 보인다. 나머지는 아직 잘 모르겠다. 우선 기본적인 템플릿으로 앱을 실행해보았다. 

 

npm start

의 명령어로 프로젝트를 실행하면 자동으로 Expo Developer Tool 창을 띄워준다. 좌측에는 Android, ios, web 온갖종류의 시뮬레이터 옵션을 볼 수 있고 우측에는 개발 로그가 찍히는 것을 볼 수 있다. (너모 신기해)

시뮬레이터가 어떻게 동작하는지 확인해보자. app.js 파일로 넘어가면 기본적인 RN 코드가 보인다. 

 

기본 코드 그대로 Expo 의 ios Simulator 로 돌려보면 아래와 같이 뜬다. 

 

 

app.js 파일의 코드를 일부 수정하여 Hello World! 를 출력해보았다. Text 의 내용을 바꿔주고, Text 에 스타일 코드를 하단에  title 이라는 이름으로 입혔다. js 파일을 저장하자마자 실시간으로 반영되는 것을 볼 수 있다. 

 

 

 

 

기본적으로 개발환경을 세팅하는 법을 알아보았다. 이 이후로는 API 로 데이터를 가져오고 보내는 작업, 레이아웃과 스타일 잡는 법을 공부할 예정이다. 마무리로 각종 참고했던 Reference 를 기록한다.

• React Native : https://reactnative.dev/

• Expo getting Started : https://docs.expo.io/

• 내 Github : https://github.com/Hyun-ee/weatherapp

• React Native 장단점 브런치 글 : https://brunch.co.kr/@kmongdev/11