[해결]MapView 렌더링 이슈 , 뒤로가기시 마커 제거 안되는 이슈
204
작성한 질문수 7
{
"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>
)}
//바뀐코드렌더링에 계속 문제가 생겨서 하루종일 봤네요
이미 존재하던 마커가 롱 프레스 이후에 노출되는 이슈가 있었는데 isPending 이후에 렌더링 하도록 하니 잘 노출 됩니다.
처음 롱 프레스 이벤트시 마커가 출력 되지 않고 애드포스트 버튼 클릭후 뒤로가기 시 선택한 마커가 사라지지 않고 누적되는 이슈가 있었습니다.
selectLocation에 값이 잘 전달 되지만 렌더링이 되지않는 이슈였고 강제로 컨디션문으로
null 일때와 아닐 때 둘다 렌더링 하게 했더니 해결 되었습니다
답변 1
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
82
1
강의 수강 순서 관련
0
70
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





