[React] 이미지를 배열로 저장하고 불러오기(Map)

 

 

 

 

이미지를 배열로 저장하고싶은데 웹에 대해 배운 적도 없고 map을 사용하는 방법도 서툴러서 검색을 열심히 해봐도 어려웠다.

단순히 이미지 배열 쓰는 방법을 검색하니 아래 블로그와 같이 로컬 이미지 파일이 아니라

http형식으로 시작하는 url을 가져다가 사용하는 것이 대부분으로 올라와있는데,

저 방식으로 로컬 이미지를 불러오면 엑스박스가 떠서 여간 골칫거리가 아니었다.

하나하나 붙여넣을수도 없고,,,

 

https://velog.io/@pock11/React%EC%97%90%EC%84%9C-map-%EC%93%B0%EA%B8%B0

React에서 map 쓰기

 

 

 

가장 도움이 되었던 글

하지만 역시나 엑스박스가 떴다.

https://ko.code-paper.com/javascript/examples-get-an-image-from-an-array-react

배열 반응에서 이미지 가져 오기 - Javascript 샘플 코드

 

 

RstImage.js -> 배열에 사진 저장

import Rst_01 from "./RstImage/Rst_valley.png"
import Rst_02 from "./RstImage/Rst_home.png"
import Rst_03 from "./RstImage/Rst_hotel.png"
import Rst_04 from "./RstImage/Rst_pool.png"
import Rst_05 from "./RstImage/Rst_beach.png"
import Rst_06 from "./RstImage/Rst_food.png"
import Rst_07 from "./RstImage/Rst_picnic.png"
import Rst_08 from "./RstImage/Rst_car.png"


const RstImage = [
    { id: 1, src: Rst_01},
    { id: 2, src: Rst_02},
    { id: 3, src: Rst_03}, 
    { id: 4, src: Rst_04},
    { id: 5, src: Rst_05},
    { id: 6, src: Rst_06},
    { id: 7, src: Rst_07},
    { id: 8, src: Rst_08},
   
]
export default RstImage;

 

코드가 필요한 곳.js

 <div>
     { RstImage.map((k) =>
         <>
          {k.id == rst ? (
              <img key={k.id} src={k.src} alt={k.src} />
          ):(<></>)}                       
          </>
      )}
</div>

필요할 때 마다 바꾸기 위해 삼항연산자로 하나씩만 출력되도록 하였다.

엑스박스가 뜨지 않도록 하려면 alt가 꼭 필요

 

 

 

 

 

 

 

map 공부자료

[React] 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트

 

React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기

 

[next.js] 로컬 image 를 불러오는 여러가지 방법