인프런 커뮤니티 질문&답변

oridori2705

작성한 질문수

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

[B-0] 마커 클러스터링 (마커 그룹화)

안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제

작성

서랍 네비게이션을 열 때마다 뒤에 MapView가 마운트 언마운트 되는 문제

아래 링크 영상처럼 서랍 네비게이션을 열 때마다 뒤에 MapView가 언마운트 마운트가 되면서 성능 관련 문제가 생기는 것 같습니다. 이게 애뮬레이터 문제인지 제 컴퓨터 문제인지, 강의에서는 이런 문제가 안보이는데..

해당 문제 해결할 방법이 혹시 있을까요?
네비게이션을 열 때마다 렉이 걸려서 자꾸 애플리케이션이 다운됩니다 ㅠㅠ
방법을 찾아보고 메모이제이션도 해보고, Drawer 옵션도 사용해봤는데 무용지물이네요 ㅠ

https://drive.google.com/file/d/1tM8iR9QgukKVd_I5zfk6GhbKneLE1DkZ/view?usp=drive_link

react-native typescript nestjs react-query zustand

답변 2

Kyo

지식공유자

이거 저도 80버전에서 겪었던 이슈인데요,
1) rn이 79.4 버전이라면 navigation 버전을 저와같이 맞추시거나,

"@react-navigation/drawer": "^7.5.2",

"@react-navigation/native": "^7.1.14",

"@react-navigation/stack": "^7.4.2",

2) 현재 네비게이션 버전을 latest로 하셨다면 react native 버전도 latest로 진행해보시는 방법

두가지 시도해보시면 좋을것 같습니다!

Kyo

지식공유자

버전알려주시고, 파일을 제가볼수없는데 엑세스허용해주시겠어요?

oridori2705

질문자

아 넵 권한 허용했습니다! 버전은 아래처럼 올리면 될까요?

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@invertase/react-native-apple-authentication": "^2.5.0",
    "@react-native-community/geolocation": "^3.4.0",
    "@react-native-masked-view/masked-view": "^0.3.2",
    "@react-native-vector-icons/fontawesome6": "^12.2.0",
    "@react-native-vector-icons/ionicons": "^12.3.0",
    "@react-navigation/drawer": "^7.7.1",
    "@react-navigation/native": "^7.1.19",
    "@react-navigation/stack": "^7.6.0",
    "@tanstack/react-query": "^5.90.5",
    "axios": "^1.13.1",
    "patch-package": "^8.0.1",
    "react": "19.0.0",
    "react-error-boundary": "^6.0.0",
    "react-native": "0.79.4",
    "react-native-bootsplash": "^6.3.11",
    "react-native-config": "^1.5.5",
    "react-native-date-picker": "^5.0.12",
    "react-native-encrypted-storage": "^4.0.3",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "^2.29.0",
    "react-native-image-crop-picker": "^0.50.1",
    "react-native-map-clustering": "^4.0.0",
    "react-native-maps": "^1.26.0",
    "react-native-permissions": "^5.4.4",
    "react-native-reanimated": "^4.1.3",
    "react-native-safe-area-context": "^5.6.1",
    "react-native-screens": "^4.18.0",
    "react-native-toast-message": "^2.3.3",
    "react-native-webview": "^13.16.0",
    "react-native-worklets": "^0.5.2",
    "zustand": "^5.0.8"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "18.0.0",
    "@react-native-community/cli-platform-android": "18.0.0",
    "@react-native-community/cli-platform-ios": "18.0.0",
    "@react-native/babel-preset": "0.79.4",
    "@react-native/eslint-config": "0.79.4",
    "@react-native/metro-config": "0.79.4",
    "@react-native/typescript-config": "0.79.4",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

oridori2705

작성한 질문수

전체 Q&A

질문하기