낭만 개발자 잡키드

react-native 프로젝트 생성 방법은 크게 npx와 expo 두 가지로 나뉘어 있는데 여기서는 npx로 설명하겠다.

npx react-native init (React Native CLI)는 최소한의 기본적인 React Native 프로젝트 구조를 제공합니다. 마치 기본 텐트와 몇 가지 필수 도구만 가지고 시작하는 것과 같습니다.

• 유연성: 네이티브 코드를 직접 작성하고 제어할 수 있어 모든 네이티브 기능을 사용할 수 있습니다.
• 커스터마이징: 프로젝트 구조나 빌드 설정을 자유롭게 변경할 수 있습니다.
• 다양한 라이브러리 호환성: Expo에서 지원하지 않는 네이티브 모듈이나 라이브러리를 사용할 수 있습니다.

하지만 React Native CLI는 Expo에 비해 초기 설정이 복잡하고, iOS 및 Android 개발 환경을 별도로 구성해야 합니다. 또한, 앱 빌드 및 배포 과정도 Expo보다 더 많은 수동 작업이 필요할 수 있습니다. 마치 직접 캠핑 장비를 하나하나 준비하고 설치해야 하는 번거로움과 비슷합니다.

먼저  react-native 프로젝트를 설치할 디렉토리를 만든다. 그리고 windows powershell을 킨 다음에 해당 디렉토리에 다음과 같은 명령어를 입력한다.

npx @react-native-community/cli@latest init 프로젝트명

만약에 특정 버전을 가지고 새로운 프로젝트를 만들고 싶다면 버전 인수를 넣으면 된다.

npx @react-native-community/cli@X.XX.X init 프로젝트명 --version X.XX.X

프로젝트 설치가 완료되면 Metro서버를 켜야한다.

여기서 Metro란 React Native용 JavaScript 빌드 도구다. Metro 개발 서버를 시작하려면 별도의 터미널로 들어가 프로젝트 폴더 경로까지 간 후 다음을 실행한다.

npm start

Metro Bundler를 별도의 터미널에서 실행했다면, React Native 프로젝트 폴더 내에 새 터미널을 열어서 다음 명령을 실행하라

npm run android

그럼 아래와 같은 화면이 나온다.

앱이 성공적으로 실행된 것을 확인했다면 이제 앱을 수정해 보자.

App.tsx 파일을 텍스트 편집기로 열어서 텍스트 내용을 바꾸거나 스타일을 변경할 수 있다.

수정을 완료한 후에는 안내에 따라 다음 중 한 가지 방법으로 변경 사항을 확인할 수 있다.

• R 키를 두 번 누른다. (시뮬레이터나 연결된 기기가 활성화된 상태에서 터미널이 아닌 앱 화면에서 R 키를 빠르게 두 번 누른다.)
• 개발 메뉴에서 "Reload"를 선택한다. (시뮬레이터나 연결된 기기에서 개발 메뉴를 열고 "Reload"를 선택한다. 개발 메뉴는 일반적으로 iOS 시뮬레이터에서는 Cmd + D, Android 에뮬레이터에서는 Ctrl + M 또는 흔들어서 열 수 있다.)