inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[해결]MapView 렌더링 이슈 , 뒤로가기시 마커 제거 안되는 이슈

204

최수렬

작성한 질문수 7

1

{
  "name": "matzip",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android ",
    "ios": "react-native -run-ios --simulator 'iPhone 16 Pro'",
    "lint": "eslint .",
    "start": "react-native start --reset-cache",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/geolocation": "^3.4.0",
    "@react-native-community/slider": "^4.5.5",
    "@react-native-masked-view/masked-view": "^0.3.1",
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/stack": "^6.4.1",
    "@tanstack/react-query": "^5.59.16",
    "axios": "^1.7.7",
    "react": "18.3.1",
    "react-native": "0.76.0",
    "react-native-date-picker": "^5.0.7",
    "react-native-encrypted-storage": "^4.0.3",
    "react-native-gesture-handler": "^2.20.1",
    "react-native-maps": "^1.18.2",
    "react-native-permissions": "^5.0.2",
    "react-native-reanimated": "^3.16.1",
    "react-native-safe-area-context": "^4.11.1",
    "react-native-screens": "^3.34.0",
    "react-native-vector-icons": "^10.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/plugin-transform-private-methods": "^7.25.9",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.0-alpha.2",
    "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
    "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
    "@react-native/babel-preset": "0.76.0",
    "@react-native/eslint-config": "0.76.0",
    "@react-native/metro-config": "0.76.0",
    "@react-native/typescript-config": "0.76.0",
    "@types/react": "^18.2.6",
    "@types/react-native-vector-icons": "^6.4.18",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-module-resolver": "^5.0.2",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  },
  "packageManager": "yarn@3.6.4"
}const {data: markers = [], isPending, error} = useGetMarkers();
  
function MapHomeScreen() {
// const {data: markers = []} = useGetMarkers();기존코드
  const {data: markers = [], isPending, error} = useGetMarkers();
  //바뀐코드

  //추가한코드
  if (isPending) return <Text>Loading...</Text>;

  if (error) return <Text>{error.message}</Text>;
  //추가한코드
 return (
    <>
      <MapView ...
        //기존코드
        {selectLocation && (
          <Callout>
            <Marker coordinate={selectLocation} />
          </Callout>
           )
         }
         //기존코드
         
        {selectLocation != null ? (
          <Callout>
            <Marker coordinate={selectLocation} />
          </Callout>
        ) : (
          <Callout>
            <Marker coordinate={selectLocation} />
          </Callout>
        )}
         //바뀐코드

렌더링에 계속 문제가 생겨서 하루종일 봤네요

  1. 이미 존재하던 마커가 롱 프레스 이후에 노출되는 이슈가 있었는데 isPending 이후에 렌더링 하도록 하니 잘 노출 됩니다.

  2. 처음 롱 프레스 이벤트시 마커가 출력 되지 않고 애드포스트 버튼 클릭후 뒤로가기 시 선택한 마커가 사라지지 않고 누적되는 이슈가 있었습니다.
    selectLocation에 값이 잘 전달 되지만 렌더링이 되지않는 이슈였고 강제로 컨디션문으로
    null 일때와 아닐 때 둘다 렌더링 하게 했더니 해결 되었습니다

 

react-native typescript nestjs react-query zustand

답변 1

0

알랭들롱

고맙습니다. 해당 이슈가 뭐때문에 발생하나 했습니다 ㅎㅎ

react-native-screens 버전 호환 문제

2

153

1

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

0

103

2

해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.

0

96

1

소스코드가 강의 순서랑 다른가요?

0

72

2

현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면

0

115

2

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

0

209

2

SQL Shell의 역할이 무엇인가요?

0

91

1

혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?

0

79

2

빠르게 실행해보고싶습니다.

0

83

1

강의 수강 순서 관련

0

71

1

애뮬레이터 실행 방법

0

99

2

무료 Apple ID로 실기기 테스트 가능한가요?

0

90

2

ios 실기기 연결

0

70

2

npm run ios에러

0

74

1

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

0

101

1

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

0

51

1

안드로이드 위치 권한 이슈 2가지 문의

0

71

1

지도가 보이려면 음.. 작성해주신 스타일과 다르게

0

74

0

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

0

83

3

강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데

0

69

2

강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!

0

82

2

사내에서 figma.com 업로드 안되나요?

0

96

1

AWS EC2 + RDS 설정

0

85

2

안드로이드 안켜집니다.

0

91

2