[RN/TS] React Native 시작하기 (with.iOS)

Sehee·2024년 8월 19일

이것저것 모음집

목록 보기

5/9

어쩌다보니,,, React Navtive로 앱을 만들게 되었다
(자세한 배경 설명은 생략한다)

프로젝트 설정부터 몰랐기에 차근차근 시작해보았다

새로운 React Native 프로젝트를 생성하는 데 사용된다
Node.js와 npm이 필요하다고 하는데, 이미 설치해뒀기에 넘어가겠다
(필요하신 분은 알아서,,)

터미널에서 프로젝트를 생성하길 원하는 경로로 이동하여 아래 명령어를 입력하면 된다
(냅다 글로벌에 설치하면 프로젝트가 생성되지 않는 오류와 마주칠 수 있음,,,)

$npm install -g react-native-cli

React Native CLI를 사용하여 새로운 React Native 프로젝트를 생성한다
본인이 사용하려는 React Native v0.71 이상에서는 TypeScript가 기본적으로 포함되어있어 따로 옵션을 설정할 필요는 없다

아래 명령어를 입력해주면 된다

$npx react-native init AppName

여기서 AppName은 앱 이름(프로젝트명)이므로 원하는 걸로 변경하면 된다

React Native v0.71 미만인 경우 명령어 뒤에 --template react-native-template-typescript 옵션을 추가해보길 바란다

나는 iOS가 더 익숙하기에, iOS로 빌드 환경을 설정해줄 것이다
(안드로이드는 테스트 기기도 없다,,,)

아래 명령어를 입력하면, iOS 시뮬레이터에서 앱을 실행할 수 있는 환경을 설정할 수 있다

$cd AppName
$npx react-native run-ios

여기서 AppName은 마찬가지로 앱 이름(프로젝트명)이므로, 위에서 프로젝트 생성할 때 변경한 이름을 넣어주면 된다

참고로, 안된다면 CocoaPods가 설치되어있는지 확인해보고 아래 명령어를 입력해보길 바란다 (글로벌로 설치해야하므로, 새 터미널창 열어서 하기)

$pod --version # cocoapods 버전 확인 (설치 여부도 함께 확인 가능)
$brew install cocoapods # homebrew로 cocoapods 설치

본인은 React Navigation을 사용할 것이기에, 관련한 라이브러리만 설치해보았다

$npm install @react-navigation/native
$npm install react-native-screens react-native-safe-area-context
$npm install @react-navigation/native-stack

VSCode에서 폴더를 열어주면 끝

프로젝트 셋팅하는 게 생각보다 험난했다
Next.js나 React Native나 둘다 은근 설정하기 어렵네
~~(역시 iOS가 최고)~~

업데이트 (2025.02.17.)
최신 글 | [RN] Error: react-native/cli is deprecated

디자인하는 개발자