React - State 빈 배열로 초기화 되는 문제

Question

안녕하세요 처음 개발 해보는 초보자입니다... 지금 카카오맵 api를 이용해서 데이터로 폴리라인을 나타내려고 하는데요도로 데이터를 불러와서 줌 레벨에 따라 데이터를 필터링 걸쳐서 다르게 나타내려고 합니다 그런데 자꾸 데이터를 불러와서 상태로 trafficData에 설정해도 빈 배열로 초기화가 됩니다..ㅜㅜ 처음에는 폴리라인이 잘 표시되지만 줌 레벨이 바뀌면 trafficData가 빈 배열로 바뀌어서 모든 폴리라인이 없어지는 상태입니다 왜 이럴까요.... 구글링도 하고 ai한테 물어봤는데도 모르겠습니다ㅜㅜimport { create } from 'zustand'; const useTrafficStore = create((set) => ({ selectedDateTime: null, trafficData: [], setSelectedDateTime: (date, time) => set({ selectedDateTime: { date, time } }), setTrafficData: (data) => set({ trafficData: data }), })); export default useTrafficStore;주스탠드 js 코드입니다import { useEffect, useState, useRef } from "react"; import SearchBar from "../MapFunction/SearchBar"; import useTrafficStore from '../../store/TrafficStore'; // 도로용 Zustand 스토어 가져오기 import useStore from '../../store/UserStore'; // 사용자 상태 관리용 Zustand 스토어 가져오기 import axios from 'axios'; import LoadingSpinner from '../UI/LoadingSpinner'; // LoadingSpinner 컴포넌트 가져오기 const { kakao } = window; function RoadResultPage() { const [map, setMap] = useState(null); // map 상태 관리 const [loading, setLoading] = useState(false); // 로딩 상태 관리 const polylinesRef = useRef([]); // 폴리라인 참조 관리 const selectedDateTime = useTrafficStore(state => state.selectedDateTime); // 선택한 날짜와 시간 가져오기 const trafficData = useTrafficStore(state => state.trafficData); // 도로 혼잡도 데이터 가져오기 const setTrafficData = useTrafficStore(state => state.setTrafficData); // 도로 혼잡도 데이터 설정 함수 가져오기 const token = useStore(state => state.token); // 사용자 토큰 가져오기 // 지도 초기화 (최초 한 번만 실행) useEffect(() => { const container = document.getElementById('map'); // 지도를 담을 영역의 DOM 레퍼런스 const options = { center: new kakao.maps.LatLng(37.458666, 126.4419679), // 지도의 중심좌표 (인천공항) level: 10 // 지도의 레벨(확대, 축소 정도) }; const kakaoMap = new kakao.maps.Map(container, options); // 지도 생성 setMap(kakaoMap); // map 상태 설정 // 지도 줌 변경 이벤트 리스너 등록 kakao.maps.event.addListener(kakaoMap, 'zoom_changed', () => { // if (trafficData.length > 0) { // updatePolylinesByZoomLevel(kakaoMap.getLevel()); // } updatePolylinesByZoomLevel(kakaoMap.getLevel()); }); }, []); // 빈 배열로 설정하여 최초 렌더링 시 한 번만 실행 // 선택한 날짜와 시간에 따라 도로 데이터를 가져오기 useEffect(() => { const fetchTrafficData = async () => { if (selectedDateTime && token) { const { date, time } = selectedDateTime; const apiUrl = import.meta.env.VITE_API_BASE_URL; setLoading(true); // 로딩 상태 시작 try { const response = await axios.get(`${apiUrl}/api/gcs/traffic/all`, { params: { date, hour: time }, headers: { Authorization: `Bearer ${token}` } }); setTrafficData(response.data); // 데이터 업데이트 } catch (error) { console.error("Error fetching traffic data:", error); } finally { setLoading(false); // 로딩 상태 종료 } } }; fetchTrafficData(); console.log("Traffic data fetched:", trafficData); }, [selectedDateTime, token, setTrafficData]); // 폴리라인 업데이트 (지도와 데이터 변경 시) useEffect(() => { if (map && trafficData.length > 0) { updatePolylinesByZoomLevel(map.getLevel()); } }, [map, trafficData]); // 폴리라인 업데이트 함수 const updatePolylinesByZoomLevel = (zoomLevel) => { // 줌 레벨에 따른 데이터 필터링 const filteredData = zoomLevel > 7 ? trafficData.filter(road => road.roadType === '국가차도') : trafficData; console.log("zoomLevel:", zoomLevel); console.log("filteredData:", filteredData); // 새 폴리라인 생성 const newPolylines = filteredData.map(road => createPolyline(road)); console.log("newPolylines:", newPolylines); // 기존 폴리라인 제거 polylinesRef.current.forEach(polyline => polyline.setMap(null)); // 새 폴리라인 지도에 추가 newPolylines.forEach(polyline => polyline.setMap(map)); // 참조 업데이트 polylinesRef.current = newPolylines; }; // 도로 데이터를 기반으로 폴리라인 생성 const createPolyline = (road) => { const path = road.coordinates.map(coord => new kakao.maps.LatLng(coord[1], coord[0])); return new kakao.maps.Polyline({ path: path, strokeWeight: 5, strokeColor: getTrafficColor(road.trafficStatus), strokeOpacity: 0.7, strokeStyle: 'solid' }); }; // 교통 상태에 따른 색상 반환 const getTrafficColor = (status) => { switch (status) { case '원활': return '#00FF00'; // Green case '서행': return '#FFFF00'; // Yellow case '정체': return '#FF0000'; // Red default: return '#000000'; // Black } }; return (

{loading && } {map && } {/* map이 존재할 때만 SearchBar 컴포넌트 렌더링 */}

); } export default RoadResultPage;

킁킁탐정 · Answer

대략적으로 살펴보니 useEffect() 사용법에 큰 문제가 있습니다. 아마도 eslint를 사용하지 않거나 구현을 위해 linting 메시지를 신경쓰지 않았을 가능성이 있어 보입니다. 하지만 react를 개발한다면 100000000% 필수로 사용하셔야 합니다. 문제가 되는 부분을 몇가지만 적어드리면..useEffect로 초기에 한번만 실행하기 위해 종속성 배열을 []로 하는건 개발자가 선택할 수 없는 문제입니다.react가 제공하는 기본 hooks를 제외하고 반드시 useEffect 내부에서 사용되는 외부 항목에 대해서 종속성배열을 지정해야합니다. eslint react를 사용하면 자동으로 개발자에게 알려줍니다.useEffect에서 addEventListener같은 외부 이벤트 바인딩을 설정했으면 clean up 함수로removeEventListener도 사용하셔야합니다. 아니면 다양한 상황에서 수십번에서 수백번 이벤트가 발생하게 됩니다.이는 곧 버그입니다.createPolyline과 getTrafficColor는 컴포넌트 외부로 빼는게 좋습니다. 기본적으로 react는 컴포넌트 랜더링시에모든 내부 함수를 재정의합니다. 이는 경우에 따라 문제가 되고 버그가 될 수 있습니다.useRef는 리렌더링을 유발하지 않습니다. updatePolylinesByZoomLevel 함수가 실행되어도 컴포넌트는다시 렌더링되지 않습니다.컴포넌트 내부에 상태가 너무 많으며 useEffect를 통해 외부와 연동까지 하나로 통합되어있는 부분을 분할하고개선해야하며 axios를 대신 fetch/react-query/swr같은 다른 도구를 사용하는게 좋습니다. 그리고zustand는 굳이 필요 없어보입니다.위에 언급한 모든 내용은 https://react.dev/ 에 자세하게 나와있습니다. 시간을 들여서 꼭 모두 읽어보시고 문제도 풀어보시면 문제 해결에 큰 도움이 되실겁니다.

React - State 빈 배열로 초기화 되는 문제

1개의 답변

Q&A 목록