react에서 axios, map 함수를 통한 api 호출

안녕하세요:) div 태그를 image 태그로 바꾼 뒤 src값에 banner.data.result.bannerImgUrl을 넣어주면 출력이 잘 될까요? div 태그를 사용해서 이미지를 보여주려면 css의 background-image 프로퍼티를 사용해야하는 것으로 알고있습니다. https://www.freecodecamp.org/news/how-to-add-an-image-url-to-your-div/

안녕하세요! 현재 코드에서 문제가 발생하는 이유는 useEffect에서 무한 루프가 발생하기 때문입니다. useEffect의 두번째 매개변수로 의존성 배열(dependency array)을 입력하지 않았기 때문입니다. 이 경우, useEffect는 컴포넌트가 렌더링될 때마다 실행되며, getBannerData 함수가 호출됩니다. 그리고 setBannerData 함수가 호출되어 상태가 변경되고, 다시 컴포넌트가 렌더링되며 무한 루프가 발생합니다. useEffect에 빈 배열을 입력하면, 컴포넌트가 처음 렌더링될 때 getBannerData 함수가 호출되고, 그 이후로는 실행되지 않습니다. 이렇게 코드를 수정하면 됩니다. 또한, setBannerData(result); 코드는 필요하지 않습니다. response.data.result를 바로 setBannerData 함수로 전달하여 상태를 업데이트하면 됩니다. 마지막으로, imgUrls 대신 src를 사용하여 이미지를 불러오는 것이 맞습니다. 다음은 수정된 코드입니다.

1function TopBanner() {
2  const [bannerData, setBannerData] = useState([]);
3
4  useEffect(() => {
5    getBannerData();
6  }, []);
7
8  const getBannerData = async () => {
9    const response = await axios({
10      method: "GET",
11      url: "https://abcde/abc/abc",
12    });
13    setBannerData(response.data.result);
14  };
15  return (
16    <Base>
17      <Container>
18        <StyledSlider {...settings}>
19          {bannerData &&
20            bannerData.map((banner) => (
21              <div className="slick-slide" key={banner.bannerIdx}>
22                <img
23                  src={banner.bannerImgUrl}
24                  alt={banner.bannerTitle}
25                  className="banner-image"
26                />
27              </div>
28            ))}
29        </StyledSlider>
30      </Container>
31    </Base>
32  );
33}
34
35export default TopBanner;