먹고놀고생각하고

이전에는 Local Development Tool  인 expo XDE를 사용했었으나, 

최근 v30.0 부터는 expo XDE 지원이 중단되고 expo CLI 를 사용하라고 되어 있다.

https://expo.io/tools

위 명령어로 설치 가능하다.

(GUI tool 에서 cmd line 만 지원하도록 변경되다니 초심자는 마음이 아프다....)

위의 명령어로 새 프로젝트를 생성해보자.

위와 같이 빈 프로젝트 / react navigation 를 선택할 수 있다.

빈 프로젝트를 선택하고 프로젝트를 생성하면 프로젝트 파일 다운로드가 시작된다. 

이것은 React Native, npm, yarn 등등 여러가지로 build에 필요한 것들이 한 번에 다운이 진행된다.

expo start를 입력하면 폴더를 스캔하고 로딩을 기다리면 프로젝트가 오픈된다.

여기서 두 가지를 확인해 볼 수있다.

첫 번째, 모바일 환경에서 확인하기

두 번째, 시뮬레이터를 사용해서 확인하기

시뮬레이터를 설치하기 귀찮으니 모바일로 확인해 보자.

사용하는 폰에서 expo 앱을 다운하고 QR code 를 스캔하면 자바스크립트를 빌드한다는 메세지를 볼 수 있다.

빈 화면에는 나의 로고를 추가할 수 있다.

첫 번째 빌드는 시간이 조금 소요된다. 이 이후부터는 변경된 Component들을 refresh 하는 것이니 첫 빌드보다는 시간이 덜 걸릴 것이다.

폰에서 빌드된 첫 프로젝트 화면을 확인할 수 있다.

이제 VSC와 프로젝트를 연결해 보자.

[File] - [Open folder] 로 가서 아까 생성한 프로젝트를 연결해주면 됨.

그리고 폰을 흔들어 주면 메뉴가 뜨는데 여기서 Reload나 여러가지를 변경해 줄 수 있다.

여기서 Live Reload 기능은 내가 업데이트를 하면 자동으로 반영해서 리프레시 해주는 것이다.

저장하고 새로고침을 하면 바로!!!!!!!반영된다. 

Hot Reloading 기능은 React Native 의 최고의 기능이라 할 수 있다.

이 기능은 이전 나의 코드를 저장하고 변경된 부분만 골라서 Reloading 하는 것이다.

Live reloading 이 앱 전체를 새로고침했다면, Hot reloading은 전체를 새로고침 하지 않는다.

변경된 그 라인만 새로고침하는 것이다.

이제 코드로 넘어가보자.