메인화면 미세먼지 출력

문제 사항

해당 구의 미세먼지의 좋음 나쁨을 출력은 하지만

새로고침을 해야 알맞게 출력 됨

 

공통

//서울의 정보 출력
const fetchData = async () => {
    try {
      const response = await axios.get(URL, {
        params: {
          serviceKey: SERVICE_KEY,
          returnType: "json",
          numOfRows: 25,
          pageNo: 1,
          sidoName: "서울",
          searchCondition: "HOUR",
        },
      });
      dispatch(mainDust(response.data.response.body.items));
      handleComparison();
    } catch (error) {
      console.log(error);
    }
  };
  
   useEffect(()=>{
    const fetchData_list = async () => {
      await fetchData();
    };
    fetchData_list();
  },[])

기존에있는 handleComparison();를 fetchDatad에서 출력

 

 

 

기존

const handleComparison = () => {
    dustList.map((item: CityDataList) => {
      if (item.cityName === addressName) {
        const list = [item.cityName, item.pm10Value, item.pm25Value];
        setCheckData(list);
      }
    });
  };

1. 미세먼지 데이터 배열에 map 사용하여 사용자가 있는 위치와 비교 하여

알맞는 정보 출력

 

 

수정

 const handleComparison = () => {
    const foundItem = dustList.find((item: CityDataList) => item.cityName === addressName);
    if (foundItem) {
      const list = [foundItem.cityName, foundItem.pm10Value, foundItem.pm25Value];
      setCheckData(list);
    }
  };

//아래 코드 추가
 useEffect(() => {
    if (dustList.length > 0) {
      handleComparison();
    }
  }, [dustList, addressName]);

1. 미세먼지 데이터 배열 find사용 사용자의 위치와 비교 한 값을 변수에 담음

2. 그 변수를 값의 유무를 조건문에 넣고 있으면 변수에 원하는 정보의 값을 담음

3. 상태로 보냄

4. 미세먼지 데이터의 배열 길이가 0보다 크면

5. 미세먼지의 변화와 사용자의 위치에 따른 의존성 배열에 따른 함수 실행