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를 사용하여 이미지를 불러오는 것이 맞습니다. 다음은 수정된 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function TopBanner() {
  const [bannerData, setBannerData] = useState([]);

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

  const getBannerData = async () => {
    const response = await axios({
      method: "GET",
      url: "https://abcde/abc/abc",
    });
    setBannerData(response.data.result);
  };
  return (
    <Base>
      <Container>
        <StyledSlider {...settings}>
          {bannerData &&
            bannerData.map((banner) => (
              <div className="slick-slide" key={banner.bannerIdx}>
                <img
                  src={banner.bannerImgUrl}
                  alt={banner.bannerTitle}
                  className="banner-image"
                />
              </div>
            ))}
        </StyledSlider>
      </Container>
    </Base>
  );
}

export default TopBanner;