[React] JSON을 사용해 여러 개의 이미지를 화면에 로드하기

사진이 너무 많아서 하나하나 import 할 수 없어서 JSON 형식으로 이미지를 로드하고 싶었다.

 

따지고보니 경로 잘못써서 계속 사진이 안떴었던 것 같다ㅎㅎ,,

 

 

jsonconfig.json

{
  "compilerOptions": {
      "baseUrl": "src"
  },
  "include": [
      "src"
  ]
}

 

절대 경로를 사용하기 위해서 package.json과 같은 위치에 jsonconfig.json 파일을 추가했다.

 

 

Perk.json

{
  "data" : [
    {
      "name": "Ace in the Hole",
      "url": "images/survivorPerks/IconPerks_aceInTheHole.png"
    }
  ]
}

이미지와 이미지 이름을 JSON 파일로 위와 같이 만들어 놓았다.

 

 

Perk.js

import React from 'react';
import data from './SurvivorPerk.json';

function SurvivorPerk () {
  
  let ImgData = data.data.map((detail, index) => {
    
    return (
      <div key={index}>
        <span>{detail.name}</span>
        <img src={detail.url} />
      </div>
    );
  });
  
  return (
    <>
      {ImgData}
    </>
  );

}

export default SurvivorPerk;

일단 사진이 잘 뜨나 확인하기 위해서 이미지 1개를 넣은 코드이다.

 

 

그리고 사진은 create-react-app으로 프로젝트를 생성한 후 그 안에 있는 public 폴더에 images라는 폴더를 만들어서 저장해놨다.

 

 

 

사진도 너무 많고 사진 + 사진 이름도 띄워야하기 때문에 JSON 파일로 사진들을 다 저장해놓기로 결정했다.

근데 reqiure를 사용하는 방법에서는 계속 모듈을 찾을 수 없다는 에러가 떠서 require를 사용하지 않고, import를 사진 하나하나 하지 않는 방법을 생각했다. DB나 S3에 저장해서 가져와 쓰는 방법도 있었지만 간단하게 만드는 프로젝트라서 일단 로컬에서 사진을 저장해서 가져와 쓸 수 있는 방법으로 선택했다.