Mac에서 React Native CLI로 개발 환경 구축하기

React Native 프로젝트를 React Native CLI 방식으로 세팅하면서 겪은 문제들과 해결 과정을 정리합니다.

Expo가 아닌 Native 기반 프로젝트(ios/android 디렉토리 포함)가 필요할 때 사용합니다.

---

✅ 1. React Native CLI 프로젝트 생성 전 기본 확인

Node 버전 확인

node -v # v20.19.2 (권장: 18.x ~ 20.x)

---

✅ 2. 예전 react-native-cli 삭제 (필수)

react-native-cli는 더 이상 사용하지 않습니다. 남아있으면 충돌이 발생합니다.

npm uninstall -g react-native-cli sudo rm -rf /usr/local/lib/node_modules/react-native-cli

 

---

✅ 3. React Native CLI 설치 (최신 방법)

이제는 @react-native-community/cli를 사용해야 합니다.

npm install -g @react-native-community/cli

---

✅ 4. React Native 프로젝트 생성

npx @react-native-community/cli init MyProject

⚠️ TypeScript는 React Native v0.71 이상에서 기본 적용되므로 별도 템플릿 지정은 필요 없습니다.

---

✅ 5. Android SDK 설정 (로컬에서만 하면 됨)

local.properties 파일 생성

cd CheongJeongEarth/android echo "sdk.dir=$HOME/Library/Android/sdk" > local.properties

Android Studio를 설치했다면 기본 경로에 SDK가 있습니다. 설정이 없을 경우 빌드 에러가 발생합니다:
SDK location not found. Define a valid SDK location...

---

✅ 6. 프로젝트 클린 및 실행

./gradlew clean cd .. npx react-native run-android # 또는 npx react-native run-ios

---

✅ 7. 내 React Native 버전 확인

 

npx react-native --version

---

🧩 마무리

📂 폴더 구조 예시

MyProject/ 
├── android/ 
├── ios/ 
├── App.tsx 
├── tsconfig.json 
├── babel.config.js 
├── package.json

---

1. 실행 하는 법

 

2. 로그찍는법

✅ 나만의 팁

• Reanimated 사용 시 babel.config.js에 꼭 아래 설정 추가해야 함:

plugins: ['react-native-reanimated/plugin']

• vector-icons 사용 시 android/app/build.gradle 마지막에 추가:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"