[React] 에러 : axios 요청 무한 루프가 나는 이유

 

1. 상황설명

내가 하고 싶었던 것은 공공 api를 이용해 내가 가고 싶은 과(외과, 내과, 치과) 등의 정보가 있으면 해당 과가 있는 병원을 받아오고 싶었다.

근데, 과 마다 병원 리스트가 다르게 나오기 때문에 내가 가고 싶은 과를 list(diagnosis)에 넣고, 그 수만큼 map을 돌려서 병원을 받아오려는 전략이었다. 근데... 무한 루프로... 1회 데이터 요청 횟수 1만회를 넘었다는 웃픈 소식이다 ㅠㅠ

 

 

2. 문제 코드 

// 데이터 호출이 무한대로 됨...^^
  diagnosisCodes.split(",").map((code)=>{
    axios.get(`https://apis.data.go.kr/B551182/hospInfoServicev2/getHospBasisList?ServiceKey=${process.env.REACT_APP_HEALTH_KEY}&numOfRows=10&sgguCd=${address_gu}&emdongNm=${address_dong}&dgsbjtCd=${code}`)
    .then((data)=>{

      // api로 불러온 정보 가져옴
      for(let i=0;i<data.data.response.body.items.item.length;i++){ 
        for(let j=0;j<hospitalList.length;j++){
          if(hospitalList[j].yadmNm === data.data.response.body.items.item[i].yadmNm){
            //중복된 값이 이미 있다.
            flag = true;
          }
        }
      
        if(!flag){
          hospitalList.push(data.data.response.body.items.item[i]);
          dispatch(changeHospitalList(data.data.response.body.items.item[i]));
        }
        flag=false;
      }//for end

    })
    .catch(()=>{
      console.log("error");
    })
  });

절차적 코딩 방식에 익숙해진 나는 대체 왜 무한 루프가 나는지 이해할 수 없다.

map 이라는 콜백함수 다음에 useEffect를 쓰지도 못한다.

 

 

 

3. 그럼 useEffect 밖에다가 쓰자 ^^;;

useEffect(()=>{
    diagnosisCodes.split(",").map((code)=>{
      axios.get(`https://apis.data.go.kr/B551182/hospInfoServicev2/getHospBasisList?ServiceKey=${process.env.REACT_APP_HEALTH_KEY}&numOfRows=10&sgguCd=${address_gu}&emdongNm=${address_dong}&dgsbjtCd=${code}`)
      .then((data)=>{

        // api로 불러온 정보 가져옴
        for(let i=0;i<data.data.response.body.items.item.length;i++){ 
          for(let j=0;j<hospitalList.length;j++){
            if(hospitalList[j].yadmNm === data.data.response.body.items.item[i].yadmNm){
              //중복된 값이 이미 있다.
              flag = true;
            }
          }
        
          if(!flag){
            hospitalList.push(data.data.response.body.items.item[i]);
            dispatch(changeHospitalList(data.data.response.body.items.item[i]));
          }
          flag=false;
        }//for end

      })
      .catch(()=>{
        console.log("error");
      })
    });
  },[]);

이러면 무한 재랜더링을 막아준다! 끝!