<React> fetch한번에 여러개받기

클론한 밀리의 서재에는 drag silder 컴포넌트를 사용해서 백엔드로부터 fetch 받아올 정보가 많이 있다
네번이나 되는 fetch를 각각 useEffect()에 넣어서 받아올려고 하니 비효율적으로 코드가 길어질거 같았다

이전 포스팅에서 공부한 동시에 ajax요청을 여러개 날리기로 한번에 많은 url을 받아올 수 있다는 것을 알게되어 이번에는 이 방식으로 fetch받아보았다

설치: npm install axios

let [data1, setData1] = useState([]);
  let [data2, setData2] = useState([]);
  let [data3, setData3] = useState([]);
  let [data4, setData4] = useState([]);

  useEffect(() => {
    axios
      .all([
        axios.get('http://localhost:8000/books', {
          params: { limit: '10', order: '-rating' },
        }),
        axios.get('http://localhost:8000/books', {
          params: { limit: '10', order: '-publishTime' },
        }),
        axios.get('http://localhost:8000/books', {
          params: { limit: '10', order: '-publishTime' },
        }),
        axios.get('http://localhost:8000/books', {
          params: { limit: '10', order: '-rating' },
        }),
      ])
      .then(
        axios.spread((res1, res2, res3, res4) => {
          const data1 = res1.data;
          const data2 = res2.data;
          const data3 = res3.data;
          const data4 = res4.data;
          setData1(data1);
          setData2(data2);
          setData3(data3);
          setData4(data4);
        })
      );
  }, []);
return(
     <DragCarousel data={data1} />
     <DragCarousel data={data2} />
     <DragCarousel data={data3} />
     <DragCarousel data={data4} />
       
)