React - Promise API와 async await

2차 프로젝트 도중 한 페이지에서 여러 개의 API 요청을 해야 했는데 Promise.all의 존재를 모르고 아주 끔찍한 짓을 저지르고 말았다.

useEffect(() => {
  axios.get(API_URL).then((res) => {
    setData(res);
  })
  axios.get(API_URL).then((res) => {
    setData(res);
  })
  axios.get(API_URL).then((res) => {
    setData(res);
  })
  axios.get(API_URL).then((res) => {
    setData(res);
  })
}. [])

물론 위 코드는 예시지만 저런식으로 보기 거북한 코드를 짜고 말았다. 결국 코드 리뷰에서 지적을 받았고 그 때 처음으로 Promise.all에 대해서 알게 되었다. 덕분에 코드가 좀 깔끔해지긴 했지만 아직까지 제대로 이해되지는 않는 개념인 것 같다. 동기의 도움을 받아서 코드를 완성하긴 했지만 공부가 더 필요한 부분인 것 같다.

내가 고친 코드는 다음과 같다.

const customAxiosFunctions = async () => {
    const urls = [
      PRODUCT_VIEW_URL,
      TABITEMS_URL,
      DETAIL_DATA_URL,
      REVIEW_ITEMS_URL,
    ];
    const promises = urls.map((el) => {
      return axios.get(el);
    });

    const resolvedResponses = await Promise.all(promises);

    resolvedResponses.map((el) => {
      const url = el.config.url;
      if (url === PRODUCT_VIEW_URL) {
        setProductData(el.data.data);
      } else if (url === TABITEMS_URL) {
        setTabItems(el.data.data);
        focusTarget.current = Array(el.data.data.length);
      } else if (url === DETAIL_DATA_URL) {
        setDetailData(el.data);
        setCuriItems(el.data.chapter);
      } else {
        setReviewItems(el.data.data);
      }
    });
  };

  useEffect(() => {
    customAxiosFunctions();
  }, []);

Promise.all에 async와 await 개념을 합친 코드이다.
복수의 URL들에게 동시에 요청을 보내고 모두 응답을 받으면 콘텐츠를 렌더하는 방식이다.
Promise.all에는 iterable(순회 가능한) 객체가 필요하기 때문에 URL들을 맵핑하여 배열에 담은 후 urls 배열을 map을 돌려 각각 axios 요청을 보낸 후 결과들을 resolvedResponses라는 변수에 담는다. 그 후 다시 resolvedResponses 변수를 map을 돌려 필요한 데이터들을 set하는 방식이다.

끔찍했던 코드가 그럴싸한 코드로 바뀌었다.