Skip to main content

프레임워크 없이 시작하기

Platform support
Android
iOS
macOS
TV
watchOS
Web
Windows
visionOS

프레임워크가 제공하는 기능이 여러분의 요구사항을 충족하지 못하거나, 직접 프레임워크를 작성하는 것을 선호한다면, 프레임워크 없이도 React Native 앱을 만들 수 있다.

이를 위해 먼저 개발 환경을 설정해야 한다. 환경 설정이 완료되면, 아래 단계를 따라 애플리케이션을 생성하고 개발을 시작한다.

1단계: 새로운 애플리케이션 생성하기​

이전에 전역으로 설치한 react-native-cli 패키지가 있다면 제거해야 한다. 이 패키지는 예상치 못한 문제를 일으킬 수 있기 때문이다.

shell
npm uninstall -g react-native-cli @react-native-community/cli

React Native Community CLI를 사용해 새로운 프로젝트를 생성할 수 있다. "AwesomeProject"라는 이름의 새로운 React Native 프로젝트를 만들어 보자:

shell
npx @react-native-community/cli@latest init AwesomeProject

이 단계는 기존 애플리케이션에 React Native를 통합하거나, 프로젝트에 Expo를 설치했거나, 기존 React Native 프로젝트에 Android 지원을 추가하는 경우(기존 앱과의 통합 참조)에는 필요하지 않다. 또한 Ignite CLI와 같은 서드파티 CLI를 사용해 React Native 앱을 설정할 수도 있다.

info

iOS에서 문제가 발생한다면, 다음 단계를 따라 의존성을 다시 설치해 보자:

  1. cd ios 명령어로 ios 폴더로 이동한다.
  2. bundle install 명령어로 Bundler를 설치한다.
  3. bundle exec pod install 명령어로 CocoaPods가 관리하는 iOS 의존성을 설치한다.

[선택 사항] 특정 버전 또는 템플릿 사용​

특정 React Native 버전으로 새 프로젝트를 시작하려면 --version 인자를 사용한다.

shell
npx @react-native-community/cli@X.XX.X init AwesomeProject --version X.XX.X

또한 --template 인자를 사용해 커스텀 React Native 템플릿으로 프로젝트를 시작할 수 있다. 자세한 내용은 여기를 참고한다.

Step 2: Metro 시작하기​

Metro는 React Native를 위한 JavaScript 빌드 도구이다. Metro 개발 서버를 시작하려면 프로젝트 폴더에서 다음 명령어를 실행한다:

shell
npm start
note

웹 개발에 익숙하다면, Metro는 Vite나 webpack과 같은 번들러와 비슷하지만 React Native를 염두에 두고 설계되었다. 예를 들어, Metro는 Babel을 사용해 JSX와 같은 구문을 실행 가능한 JavaScript로 변환한다.

3단계: 애플리케이션 실행​

Metro Bundler가 자체 터미널에서 실행되도록 한다. React Native 프로젝트 폴더 안에서 새로운 터미널을 열고 다음 명령어를 실행한다:

shell
npm run android

모든 설정이 올바르게 되어 있다면, 곧 Android 에뮬레이터에서 새로운 앱이 실행되는 것을 볼 수 있다.

이 방법 외에도 Android Studio 내에서 직접 앱을 실행할 수도 있다.

만약 이 방법이 동작하지 않는다면, 문제 해결 페이지를 참고한다.

Step 4: 앱 수정하기​

앱을 성공적으로 실행했으니 이제 수정해 보자.

  • 원하는 텍스트 편집기에서 App.tsx 파일을 열고 몇 줄을 편집한다.
  • R 키를 두 번 누르거나 Dev 메뉴(Ctrl + M)에서 Reload를 선택해 변경 사항을 확인한다!

축하합니다! 여러분은 첫 번째 기본 React Native 앱을 성공적으로 실행하고 수정했습니다.

다음 단계​

  • 기존 애플리케이션에 새로운 React Native 코드를 추가하려면 통합 가이드를 참고한다.
  • React Native에 대해 더 자세히 알고 싶다면 React Native 소개를 확인한다.