[FE]json파일로부터 각 문제 이미지 띄우기(4)/html-react-parser

앞서 포스팅에서 dangerouslySetInnerHTML을 사용했을 때 발생할 수 있는 문제점들을 포스팅 했었다. 다시 상기가 필요하다면 아래 링크를 통해서 마지막 하단 부분을 읽어 보길 바란다.

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

dangerouslySetInnerHTML을 사용하지 않고 html을 어떻게 랜더링 할 수 있는지 고민하다 찾은 라이브러리가 html-react-parser이다. parseImageTag함수는 변함이 없다. 변화가 되어야할 코드는 jsx문법 부분에서 변하는데 코드는 아래와 같다.

import React, { useState, useEffect } from "react";

import { Link } from "react-router-dom";

import parse from 'html-react-parser'; // html-react-parser 모듈 사용

  ...

<ol>

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

          <li key={index}>

            {/* 질문 */}

            <p>{parse(parseImageTag(item.question, item.image, "test_image"))}</p>

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

            {/* 4선지 */}

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

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

            ))}

          </li>

        ))}

</ol>

기존과 달리 <p dangerouslySetInnerHTML={{ __html: parseImageTag(item.question, item.image, "test_image") }} />를 삭제하고 <p>{parse(parseImageTag(item.question, item.image, "test_image"))}</p> 이와 같은 코드를 작성하면 안전하게 html을 렌더링 하게 된다. 이제 className을 활용해서 css를 작성하기만 하면 된다.