[React Native] stackOverflowError, 버전 upgrade

안녕하세요...

 

React Native 개발을 하며 겪은 다양한 오류와 해결 과정을 공유하려고 합니다. 사실 저도 처음에는 잘 몰라서 해결하는 데 시간이 오래 걸렸어요. 하지만 이번 경험을 통해 공식 문서를 읽는 습관이 얼마나 중요한지 다시금 깨달았습니다.

---

❌ React Native 프로젝트 세팅 후 첫 번째 에러 발생

npm을 사용해 프로젝트를 세팅한 뒤, 네비게이터 설정을 위해 다음과 같은 패키지를 설치했습니다.

npm install @react-navigation/stack

그런데 앱을 실행하자마자 다음과 같은 에러가 발생했습니다.

error Failed to install the app. Make sure you have the Android development environment set up: 
https://reactnative.dev/docs/environment-setup. Error: Command failed: gradlew.bat 
app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build completed with 2 failures. 
... 
Execution failed for task ':app:compressDebugAssets'. 
java.lang.StackOverflowError (no error message)

처음에는 StackOverflowError의 원인을 알 수 없었어요. GPT에게 질문도 해보고,

• node_modules 삭제 후 재설치
• package-lock.json 삭제 후 재설치
• gradlew clean 실행

등의 시도를 여러 번 반복했지만 해결되지 않았습니다.

---

🔍 원인 파악: React Native와 라이브러리 버전 불일치

오랜 삽질 끝에 결국 React Native 버전과 라이브러리 버전이 맞지 않다는 것을 알게 되었습니다!
👉 공식 문서 읽는 습관을 기르자는 교훈을 다시 한번 얻었어요.

📌 해결 방법

1. react-native-screens 등 네비게이션 관련 모듈을 다운그레이드
2. 하지만 이렇게 하면 매번 모듈 설치 시 버전을 일일이 맞춰야 한다는 점이 불편...
3. 그래서 아예 React Native 자체를 최신 버전으로 업그레이드하기로 결정!

---

⚡ React Native 업데이트 과정에서 겪은 오류와 해결 방법

업그레이드도 순조롭지 않았습니다. 😂

1️⃣ React Native 업그레이드 실행

npx react-native upgrade

👉 0.71.8 → 0.78.0 업그레이드 시도

2️⃣ 일부 파일이 자동 업데이트되지 않음

⚠️ 에러 메시지

warn Excluding files that exist in the template, but not in your project: error Excluding files that failed to apply the diff: - .gitignore - App.tsx - android/app/src/main/res/drawable/rn_edit_text_material.xml ...

✅ 해결 방법

• git diff로 변경된 파일 확인
• React Native Upgrade Helper 비교
• git restore 또는 git checkout으로 일부 파일 복구 후 다시 실행

3️⃣ @react-native-community/cli 관련 에러

⚠️ 에러 메시지

react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include: "devDependencies": { "@react-native-community/cli": "latest" }

✅ 해결 방법

• package.json의 devDependencies에 추가
• npm install 다시 실행

4️⃣ npm install 실행 중 패키지 버전 충돌

⚠️ 에러 메시지

npm ERR! Found: react@19.0.0 npm ERR! Conflicting peer dependency: react@18.3.1

✅ 해결 방법

• package.json에서 react 버전 18.x로 맞추기
• npm install --legacy-peer-deps 실행

5️⃣ react-native upgrade 실행 불가

⚠️ 에러 메시지

error: unknown command 'upgrade'

✅ 해결 방법

• 최신 React Native에서는 upgrade 명령어 제거됨
• package.json 수정 후 npm install 실행
• react-native-community/cli 업데이트

---

📌 최종 해결: 적절한 버전 선택이 중요

React Native 공식 문서를 확인하니 최신 버전이 0.77인데 저는 upgrade 명령어를 쓰니 0.78로 되어있었고! 대부분의 라이브러리가 0.74를 기준으로 나눠지는 것을 확인했습니다!
👉 결국 0.74로 다운그레이드하자 모든 게 정상적으로 동작했습니다 🎉

하지만... 또 다른 네비게이션오류가 기다리고 있었습니다... 😭
이 이야기는 다음 포스팅에서 다루겠습니다!

---

📝 결론

🚨 React Native에서 StackOverflowError 발생 시, 꼭 라이브러리와 React Native 버전을 확인하자!

• 공식 문서와 업그레이드 가이드를 반드시 참고하자.
• 프로젝트를 처음부터 다시 세팅하는 것보다 적절한 버전을 맞추는 것이 더 빠른 해결책일 수 있다.