React Native App.js 기반으로 프로젝트 만들기

React Native 프로젝트 생성시 App.js 로 시작하기

React Native 공부를 위해서 강의를 보는데,

강사의 화면에서는 자료 구조가 App.js 형태로 되어 있더군요.

그런데 어째서인지 따라서 똑같이 만든 프로젝트는 App.tsx 를 기반으로 되어 있었습니다.

찾아보니 간단한 오류였습니다.

대부분의 강의에서는 0.71 이전 버전을 사용하고 있던 거였죠.

비교적 최근에 공부를 시작하는 사람들은 모두 0.71 이상 버전으로 다운로드가 되니까 세팅 환경에 차이가 있었습니다.

즉 0.70 버전으로 프로젝트를 생성하면 해결입니다!

0.70 버전으로 프로젝트 생성

				
					npx react-native init MyNewApp --version 0.70.0

기존에는 뒤에 버전이 없고 그냥 최신 버전으로 프로젝트를 만들었죠?

이렇게 생성하면 이제 App.js 가 있는 버전으로 프로젝트가 생성 가능합니다.

Expo 세팅

				
					npm install expo

Expo 를 사용하고 싶다면 생성한 프로젝트 폴더의 경로로 이동하고,

그곳에서 위 코드를 통해 expo를 다운로드 하면 됩니다.

				
					sudo npm install --global expo-cli

또한 다음과 같이 전역에도 expo 설치가 필요합니다.

이후에 프로젝트 폴더에 있는 app.json 파일을 찾습니다.

				
					{
  "expo": {
    "name": "MyNewApp",
    "slug": "my-new-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "platforms": ["ios", "android"],
    "sdkVersion": "51.0.0",  // 설치된 Expo SDK 버전에 맞게 설정하세요.
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    }
  }
}

해당 파일의 내용을 이렇게 변경해주면 됩니다.

포인트는 sdkVersion 부분을 설정하면 됩니다.

아마 51.0.0 으로 설정하면 다 되시지 않을까 생각합니다.

				
					npx expo start

이제 이 명령어를 실행하면 expo 실행이 될 겁니다.

이런데도 에러가 생긴다?

				
					npx expo start

혹시나 해당 명령어에서 에러가 발생해서 expo 실행이 안 될 수도 있습니다.

이 경우는 다음의 버튼을 클릭해서 따라서 수행해주세요.

마치며...

이제 React Native 공부를 위한 최소한의 조건을 완수한 것이니 강의를 마음껏 들어도 될 것 같습니다.^^