react-native-maps 마커 리랜더링 안될 때

모를땐 역시 이슈를 찾아보는게 훨씬 낫다.

 

my code

{ shippingRouteStore.scheduleList.map((schedule, index, arr) => {
    const coordinate: LatLng = generateCoordinate(schedule);

    return (
        /** 
         * @see https://github.com/react-native-maps/react-native-maps/issues/3098
        */
        <Marker
            // NOTE : react-native-map no rendering issus
            // @see https://github.com/react-native-maps/react-native-maps/issues/1800
            // key change - {schedule.deliveryConfirmDatetime}
            key={`assign-...-${index}-${schedule.deliveryConfirmDatetime}`}
           	...
        >
            /* custome marker */
        </Marker>
    );
})}

https://github.com/react-native-maps/react-native-maps/issues/1800

설명을 간단히 하면

1. 어떤 로직에 의해서 스토어 값이 변경됨 (여기서는 scheduleList 가 변경)

2. 기대한 값은 맵에 있는 값이 리랜더링 되어야하는데, 지도 효율때문에 그런지 변경된 key 가 아니라면 리랜더링이 되지 않음.

3. 변경되서 리 랜더링 되어야 하는 값을 키값으로 사용하니 다시 랜더링이 된다.

 

원래는 useCallback 으로 다시 표시해야할 값을 불러오기도 했는데 지도에서는 씨알도 안먹혔다..