React 앱에서의 img 태그

메인페이지에 캐러셀(슬라이더)을 넣으려고 찾아보다가
react-material-ui-carousel을 사용하게 됐는데
img 태그 url이 안먹혔다,,

VScode에서 이미지 코드 줄 왼쪽에 작게 이미지가 뜨는 걸 보면 경로가 틀린 건 아닌 것 같은데
실행시키니까 자꾸 이미지가 엑박(정확히는 작은 사진모양 아이콘)으로 떠서
뭐가 문제인가 하고 보니
일단 img태그 src속성에 직접적으로 url을 쓰는 건 잘 안한다고 한다.
(기술 매니저님이 말씀하셨는데 이유는 아직 모름)
그래서 리액트 앱에서 이미지 사용하는 방법을 알려주셨다.

src폴더에 넣고 import 해서 사용하는 방법도 있는데

난 좀더 기본적인 방법같아 보이는 public 폴더에 저장해서 접근하는 방식을 써봤다.
(styled-components를 써서 이름이 길다보니 약간 많아보이지만 아주 단순한 코드)

import React from 'react';
import * as St from '../style';
import Carousel from 'react-material-ui-carousel';

const MainCarousel = () => {
  const MainCarouselArr = [
    {
      id: 1,
      url: '../hDaangnMainImg1.png',
    },
    {
      id: 2,
      url: '../hDaangnMainImg2.png',
    },
    {
      id: 3,
      url: '../hDaangnMainImg3.png',
    },
  ];

  return (
    <St.CarouselContainerDiv>
      <Carousel 
        cycleNavigation={true} 
        navButtonsAlwaysVisible={true}
        navButtonsProps={{style: {backgroundColor: '#bbb',}}}
        activeIndicatorIconButtonProps={{style: {color: 'var(--main-color)'}}}
      >
        {MainCarouselArr?.map(content => (
          <St.CarouselBoxDiv key={content.id}>
            <img src={content.url} style={{width: '100%'}}/>
          </St.CarouselBoxDiv>
        ))}
      </Carousel>
    </St.CarouselContainerDiv>
  );
};

export default MainCarousel;

그 과정 중에 알게 된 사실
아마도 img파일을 넣어두는 폴더가 잘못되었었나보다.
assets폴더에서는 엑박이 뜨더니
public폴더에 넣고 경로수정 하자마자 이미지가 잘 뜨는 것,,,

메인페이지 분위기가 확 살아나서 별거 안했는데 뿌듯ㅎㅎ
아무튼 캐러셀을 잘못 선택한건가 mui carousel을 탓할 뻔 했는데
안바꾸고 이미지 건드려보길 잘했다.
쉬운 방법부터 다 부수고 해보기!

참고 글!
[React] 이미지 사용하기