Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- callback
- 혼프
- Porject
- sql
- Project
- 게임
- ajax
- 참고블로그
- slow and steady
- Import
- mysql
- https://m.blog.naver.com/tt2t2am1118/221010125300
- eport
- database
- JS #프로젝트
- json
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- async
- object
- db
- prj
- promise
- await
- js
- 동기
- execCommand
- webpack
- addEventListener
- setTimeout()
- 비동기
Archives
- Today
- Total
C-log
[FE]json파일로부터 각 문제 이미지 띄우기(4)/html-react-parser 본문
728x90
앞서 포스팅에서 dangerouslySetInnerHTML을 사용했을 때 발생할 수 있는 문제점들을 포스팅 했었다. 다시 상기가 필요하다면 아래 링크를 통해서 마지막 하단 부분을 읽어 보길 바란다.
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를 작성하기만 하면 된다.
728x90
'💻개발 노트 > 나만의 시험지' 카테고리의 다른 글
수정된 API와 앞으로 FE의 개발 방향성 (0) | 2024.03.06 |
---|---|
[FE]image_test (0) | 2024.03.04 |
[FE]json파일로부터 각 문제 이미지 띄우기(3) (0) | 2024.03.02 |
[FE]json파일로부터 각 문제 이미지 띄우기(2) (0) | 2024.03.02 |
[FE]json파일로부터 각 문제 이미지 띄우기(1) (0) | 2024.02.29 |
Comments