Multiple axios requests in useEffect

아래 포스팅에서 useEffect 사용 시 메모리 누수 문제에 대해서 알아보았다.
https://velog.io/@ckvelog/react-memoryleak

useEffect안에서 비동기 요청을 보내는데 모두 따로 보내서 중복적인 코드를 작성했었다.

Promise.all을 사용해서 urls라는 배열을 만들어서 urls 배열에 있는 url들을 동시에 요청을 보내고 응답을 모두 받으면 렌더하는 방식으로 변경했다.
반환된 배열에 config에 url이 같은 것을 찾아 setState를 업데이트 해주는 방식으로 변경했다.

const [userInfo, setUserInfo] = useState([]);
  const [reviewInfo, setReviewInfo] = useState([]);
  const [likesInfo, setLikesInfo] = useState([]);
  useEffect(() => {
    let isComponentMounted = true;
    const fetchData = async () => {
      const urls = [
        `${process.env.REACT_APP_API_URL}/users`,
        `${process.env.REACT_APP_API_URL}/likes`,
        `${process.env.REACT_APP_API_URL}/reviews`,
      ];

      const promises = urls.map((cur) => {
        return axios.get(cur);
      });

      const resolvedRes = await Promise.all(promises);
      
      if (isComponentMounted) {
        resolvedRes.map((cur) => {
          const url = cur.config.url;
          if (url === `${process.env.REACT_APP_API_URL}/users`)
            setUserInfo(cur.data.data);
          else if (url === `${process.env.REACT_APP_API_URL}/likes`)
            setLikesInfo(cur.data.data);
          else if (url === `${process.env.REACT_APP_API_URL}/reviews`)
            setReviewInfo(cur.data.data);
        });
      }
    };
    fetchData();

    return () => {
      isComponentMounted = false;
    };
  }, []);

Promise.all는 모든 promise가 이행될 때까지 기다렸다가 결과값을 담은 배열을 반환한다.
promise 하나라도 실패하면 거부되서 실패한다(나머지 promise들은 무시된다).