프레임워크 없이 시작하기
프레임워크가 제공하는 기능이 여러분의 요구에 적합하지 않거나, 직접 프레임워크를 작성하는 것을 선호한다면, 프레임워크 없이 React Native 앱을 만들 수 있다.
이를 위해 먼저 개발 환경을 설정해야 한다. 환경 설정이 완료되면, 아래 단계를 따라 애플리케이션을 생성하고 개발을 시작할 수 있다.
Step 1: 새로운 애플리케이션 생성
이전에 전역으로 설치한 react-native-cli 패키지가 있다면 제거해야 한다. 이 패키지는 예상치 못한 문제를 일으킬 수 있기 때문이다.
npm uninstall -g react-native-cli @react-native-community/cli
새로운 프로젝트를 생성하기 위해 React Native Community CLI를 사용할 수 있다. "AwesomeProject"라는 이름의 새로운 React Native 프로젝트를 생성해 보자:
npx @react-native-community/cli@latest init AwesomeProject
이 과정은 기존 애플리케이션에 React Native를 통합하거나, 프로젝트에 Expo를 설치했거나, 기존 React Native 프로젝트에 Android 지원을 추가하는 경우에는 필요하지 않다. 또한 Ignite CLI와 같은 서드파티 CLI를 사용해 React Native 앱을 설정할 수도 있다.
iOS 관련 문제가 발생한다면, 다음 단계를 따라 의존성을 다시 설치해 보자:
cd ios명령어로ios폴더로 이동한다.bundle install명령어로 Bundler를 설치한다.bundle exec pod install명령어로 CocoaPods가 관리하는 iOS 의존성을 설치한다.
[선택 사항] 특정 버전 또는 템플릿 사용하기
특정 React Native 버전으로 새 프로젝트를 시작하려면 --version 인자를 사용한다:
npx @react-native-community/cli@X.XX.X init AwesomeProject --version X.XX.X
또한 커스텀 React Native 템플릿으로 프로젝트를 시작하려면 --template 인자를 사용할 수 있다. 자세한 내용은 여기에서 확인할 수 있다.
Step 2: Metro 시작하기
Metro는 React Native를 위한 자바스크립트 빌드 도구이다. Metro 개발 서버를 시작하려면 프로젝트 폴더에서 다음 명령어를 실행한다:
- npm
- Yarn
npm start
yarn start
웹 개발에 익숙하다면 Metro는 Vite나 webpack과 같은 번들러와 유사하지만, React Native를 위해 처음부터 설계되었다. 예를 들어, Metro는 Babel을 사용해 JSX와 같은 구문을 실행 가능한 자바스크립트로 변환한다.
Step 3: 애플리케이션 실행
Metro Bundler는 별도의 터미널에서 실행되도록 한다. React Native 프로젝트 폴더 안에서 새로운 터미널을 열고 다음 명령어를 실행한다:
- npm
- Yarn
npm run android
yarn android
모든 설정이 올바르게 되어 있다면, 곧 Android 에뮬레이터에서 새로운 앱이 실행되는 것을 볼 수 있다.
이것은 앱을 실행하는 한 가지 방법이다. Android Studio 내에서 직접 실행할 수도 있다.
이 방법으로 실행되지 않는다면, 문제 해결 페이지를 참고한다.
Step 4: 앱 수정하기
앱을 성공적으로 실행했으니 이제 수정해 보자.
- 원하는 텍스트 편집기에서
App.tsx파일을 열고 몇 줄을 수정한다. - R 키를 두 번 누르거나 Dev 메뉴(Ctrl + M)에서
Reload를 선택해 변경 사항을 확인한다!
축하합니다!
여러분은 첫 번째 기본 React Native 앱을 성공적으로 실행하고 수정했습니다.
다음 단계는?
- 기존 애플리케이션에 이 새로운 React Native 코드를 추가하려면 통합 가이드를 확인한다.
- React Native에 대해 더 알고 싶다면 React Native 소개를 살펴본다.