React-native 시작

# 💡 개요

: react native 공식 문서를 확인해보면, 개발 환경에 있어 두 가지 CLI Tool 옵션을 권장한다.

• Expo CLI (추천)*
  • 초보자 권장
  • 별도의 xcode, 안드로이드 스튜디오 등의 설치가 필요 없이 자체적으로 다룰 수 있는 툴
  • 라이브러리 사용에 제약이 있어, 복잡한 애플리케이션 제작엔 권장하지 않음
• React Native CLI
  • 모바일 애플리케이션에 익숙한 개발자들에게 권장하는 툴
  • 안드로이드 스튜디오, xcode 등의 설치를 요구

⇒ 이에 따라 Expo CLI 툴을 다운로드 하고, 어떤 식으로 사용하는지 알아본다.

※ 필자는 window OS를 사용하고 있기 때문에, MAC OS를 사용하는 경우 방식이 다를 수 있다.

---

1. 사이트에 접속하여 회원 가입을 진행한다.

: 사이트에 가입한 계정(이메일/비밀번호)는 추후 연동에 필요하기 때문에 잘 기억해두자.

Expo

자세한 것은 공식 사이트에 들어가면 확인할 수 있다.

2. Expo 모바일 어플리케이션을 설치하여, 가입한 계정으로 로그인을 진행한다.

: 추후, 제작한 프로젝트를 해당 애플리케이션 내에서 확인할 수 있기 때문에 연동은 필수

3. Teminal을 열어, Expo를 install 해준다.

: 당연하지만, React 에 필요한 node.js 설치는 필수

▶ 설치 방법
npx expo start

• 터미널에 해당 명령어 입력 시 설치가 진행된다.
• 현재 expo에서 global 방식을 권장하지 않기 때문에 위 방법으로 진행해야 한다.

4. 설치가 완료되었다면, 프로젝트를 생성한다.

▶ 프로젝트 생성 방법

npx create-expo-app 앱 이름 --template

• 터미널에 해당 명령어 입력 시 자동으로 파일이 생성된다.
  ▶ create 시작 시 template 설정에 대한 것을 물어본다
  • 선택은 Blank로 진행했다.
  • 각자 프로젝트에 따라 유동적으로 선택하면 될 거 같다.
• 파일 생성이 완료되었다면, vscode에서 생성된 폴더를 열어주자.

▶ App.js 생성 오류?

• npx create-expo-app 앱 이름
  

으로 프로젝트 생성 시 App.js 파일이 생성되지 않는다.

• (필자는 이 문제로 1시간 가량 고생했으니 다들 실수하지 않기 바란다…)

...

위 방법으로 프로젝트를 생성할 수 있다.

다음으론 만든 애플리케이션을 확인하는 방법에 대해 알아본다.

5. 제작한 프로젝트 확인하기

1. VSCode에서 expo Login 하기

npx expo login

• 터미널에 해당 명령어 입력 시 login을 진행할 수 있도록 명령어가 뜬다. 따라서 차분히 로그인 하자.
• 별도의 메세지가 없더라도 걱정하지 말자. 틀리면 틀렸다고 칼같이 알려준다(…)

2. 프로젝트 열기

npx expo start

• 터미널에 해당 명령어 입력 시 연동할 수 있는 QR code 및, 사이트로 연결된다. (android 기준)
• 애플리케이션을 통해 QR code를 인식하여, 제작한 프로젝트를 확인해볼 수 있다.
• 확인이 끝났다면, Ctrl + C를 통해 서버 연결을 해제할 수 있다

5-1. Test

: 실제로 잘 열린 것인지 확인해보고 싶다면

• App.js 에서 코드를 살짝 수정해보자.
  View 태그 내에 존재하는 Text 태그의 내용을 변경해보자

  • expo 앱 확인 시 내용이 변경된 것을 확인할 수 있다.

• expo App에서 수정 사항이 반영되지 않는다면?

  • 작업하고 있는 consloe에서 r을 눌러보자.
  • 애플리케이션 Refreshed 작업을 해준다.