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

{
  "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 일때와 아닐 때 둘다 렌더링 하게 했더니 해결 되었습니다