[FE]json파일로부터 각 문제 이미지 띄우기(2)

앞 포스팅에서 직접 샘플로 제작된 json파일을 직접 수정 해보았다. 이번에는 이미지파일을 json파일로 넣어 놓고 해당 파일을 불러올 것이다. 내가 수정한 json파일은 아래와 같다. 

{

    "sample": [

        {

            "id": "1",

            "image": "https://png.pngtree.com/thumb_back/fh260/background/20230609/pngtree-three-puppies-with-their-mouths-open-are-posing-for-a-photo-image_2902292.jpg",

            "question": "다음 중 총중량 <img src=1/> 1.5톤 피견인 승용자동차를 4.5톤 화물자동차로 견인하는 경우 필요한 운전면허에 해당하지 않은 \n것은?",

            "options": [

                "① 제1종 대형면허 및 소형견인차면허",

                "② 제1종 보통면허 및 대형견인차면허",

                "③ 제1종 보통면허 및 소형견인차면허",

                "④ 제2종 보통면허 및 대형견인차면허"

            ],

            "questionImageUrls": [],

            "questionImageDescriptions": [

                ""

            ],

            "answers": [

                "4"

            ],

            "explanation": "도로교통법 시행규칙 별표18 총중량 750킬로그램을 초과하는 3톤 이하의 피견인 자동차를 견인하기 위해서는 견인\n하는 자동차를 운전할 수 있는 면허와 소형견인차면허 또는 대형견인차면허를 가지고 있어야 한다.",

            "explanationImageUrls": [],

            "explanationImageDescriptions": [],

            "tags": [],

            "type": "객관식"

        },

...

}

이제 해당 데이터를 브라우저에 띄워 볼 것이다. 수정되어야 할 부분은 parseImageTag이다. 아래 코드를 살펴보자.

 

//HTML 문자열에 포함된 <img> 태그를 실제 이미지로 변경하는 함수

  const parseImageTag = (question_img, question_img_url, question_img_class ) => {

    // 정규식을 사용하여 <img src=1> 문자열을 찾는다.

    const imgRegex = /<img\s+src=1\s*\/?>/g;

    // 대체할 이미지 태그로 교체한다.

    return question_img.replace(imgRegex, `<img src="${question_img_url}" className="${question_img_class}" />`);

  };

 

추후에 className도 불러올 것이기 때문에 매개변수로 question_img_class도 추가해 두었다. 이제 jsx로 불러올 수 있게 아래와 같이 작성하면 된다.

<ol>

        {data.map((item, index) => (

          <li key={index}>

            {/* 질문 */}

            <p dangerouslySetInnerHTML={{ __html: parseImageTag(item.question, item.image, "test_image") }} />

            {/* 4선지 */}

            {item.options.map((option, index) => (

              <div key={index}>{option}</div>

            ))}

          </li>

        ))}

      </ol>

이렇게 작성하면 문제 없이 브라우저로 HTML태그를 변환 삽입 및 이미지를 로딩할 수 있다. 

이번엔 더 나아가서 이미지가 여러개인 경우에 이미지 삽입 하는 것을 시도 해 볼 것이다. 이 부분은 다음 포스팅에서 이어서 해보 겠다.