React에서 map사용 시 too many re-renders 에러가 일어납니다..

Question

백으로 부터 shop의 정보를 받아와서 지도에 shop의 정보를 아이콘으로 띄워주는 것을 구현하고 있습니다.shop의 정보가 여러 개이기 때문에 받은 정보를 map으로 삽입하려고 하는데 too many re-render 오류가 발생해서 어떤식으로 수정을 하면 좋을지 여쭤보고 싶습니다..!!한 번만 봐주시면 감사드리겠습니다..!! 🥲``` import React, { useEffect, useState } from 'react'; import LocateButton from 'components/map/LocateButton'; import ShopMarker from 'components/map/ShopMarker'; import UserMarker from 'components/map/UserMarker'; import Navigator from 'components/Navigator'; import { LocationType } from 'models/Location'; import { Shop } from 'models/shop/Shop'; import { useGeolocated } from 'react-geolocated'; import { Map } from 'react-kakao-maps-sdk'; import { fetchShopList } from 'service/shop'; const MapPage: React.FC = () => { const { coords, isGeolocationAvailable, isGeolocationEnabled, getPosition } = useGeolocated({ watchPosition: true }); const [centerLocation, setCenterLocation] = useState({ lat: 0, lng: 0, }); const [userLocation, setUserLocation] = useState({ lat: 0, lng: 0, }); const [shopList, setShopList] = useState([]); const [shopLocation, setShopLocation] = useState({ lat: 0, lng: 0, }); const isCenterLocationInitialized = centerLocation.lat !== 0; useEffect(() => { if (coords) { setUserLocation({ lat: coords.latitude, lng: coords.longitude }); if (!isCenterLocationInitialized) { setCenterLocation({ lat: coords.latitude, lng: coords.longitude }); } } }, [coords, isCenterLocationInitialized]); if (!isGeolocationAvailable) { // TODO: Geolocation API를 지원하지 않는 브라우저에 대한 처리 return

Your browser does not support Geolocation

; } if (!isGeolocationEnabled) { // TODO: Geolocation API를 지원하지만 사용자가 위치 정보 공유를 거부한 경우에 대한 처리 return

Geolocation is not enabled

; } const handleMapCenterChanged = (map: kakao.maps.Map) => { setCenterLocation({ lat: map.getCenter().getLat(), lng: map.getCenter().getLng(), }); }; const handleLocateButtonClick = () => { getPosition(); setCenterLocation({ ...userLocation }); }; // 여기서 백으로부터 가게 정보를 받아옴. const Test = async () => { const getShopList = await fetchShopList( userLocation.lat, userLocation.lat - 30, userLocation.lng, userLocation.lng - 30 ); setShopList(getShopList.data); }; Test(); return (

// 여기서 too many re-render 문제가 발생함. {shopList.map((shop) => { setShopLocation({ lat: shop.lat, lng: shop.lng }); return ; })}

); }; export default MapPage; ```

songline · Accepted Answer

{shopList.map((shop) => { setShopLocation({ lat: shop.lat, lng: shop.lng }); return ; })}위 코드에서 map을 보면 setShopLocation({ lat: shop.lat, lng: shop.lng }); 가 있습니다. setState류 함수들은 실행되면 state를 변화시키면서 다시 렌더링을 하는데요. 이로 인해 컴포넌트가 렌더링 되면서 setShopLocation이 실행되고, 저게 실행되었으니 다시 렌더링을 시도하고, 또 저 함수가 실행되고, 다시 렌더링되고 이런 무한 루프 사이클이 형성된 것입니다.shopList에서 map을 돌면서 그 위치 정보를 오브젝트로 가공해 ShopMarker로 넘기시려 하신 것 같은데 그러한 목적으로는 state를 사용해선 안됩니다. state는 말 그대로 상태값으로, 이런 저런 로직이 다 처리되고 나서 특정 시점에 최종적으로 컴포넌트가 가지고 있는 정보를 담기 위해 사용하는 정보입니다. 그걸 로직 중간에 사용하는 정보로 활용하면 보신 것처럼 로직이 끝에 다다르지 못하고 계속 리렌더링만 반복하다 퍼져버리죠.로직 중간에 사용되는 임시 정보를 표현할 목적이라면 그냥 const로 선언한 지역변수를 사용하는 것이 맞습니다. 코드를 보면 { lat: number, lng: number } 꼴인 정보를 prop으로 넘기는 상황이므로 저렇게 할 필요 없이 {shopList.map((shop) => { return ; })}이런 식으로 사용하시면 됩니다. 저렇게 바꾸면 무한 리렌더링 오류도 사라질거에요.혹시 단순히 정보를 넘기는 것 이외에 목적한 것이 있어 state를 사용하려 하셨다면 말씀해주세요.

초보자1212 · Answer

Test() 를 선언과 동시에 바로 실행시키고 있는데 이 부분을 useEffect 내부에서 처리하도록 변경해보시겠어요?

React에서 map사용 시 too many re-renders 에러가 일어납니다..

2개의 답변

#ts 목록