아웃룩이 string으로 통 html을 넘겨줘서 이걸 잘 그려야 했는데, 어떻게 파싱해야되지?? iframe으로 해야하나 고민하고 있었다.
그러던 와중 멘토님이 html-react-parser 라는게 있으니 참고하라고 알려주셨다.
How to render HTML string in react?
how to pick body contents html-react-parser?
등 어떻게 html 안에 또 html을 뿌려주냐 고민하다가 아 어차피 string인데.. <body></body>안쪽만 추출해서 파싱해주면 되겠다 싶어서 string을 자르는방법을 선택했다.
좋은방법인지는 모르겠으나 react의 dangerouslySetInnerHTML 보다는 낫다는 판단이다.
import parse from 'html-react-parser';
...
useEffect(() => {
if (data?.desc) {
const startIndex = data?.desc.indexOf('<body>');
const lastIndex = data?.desc.lastIndexOf('</body>');
const bodyTagLength = 6
const bodyInnerHtml = data?.desc.slice(startIndex+bodyTagLength, lastIndex);
setParsingDesc(bodyInnerHtml);
}
}, [data]);
...
{data?.desc ? parse(parsingDesc) : "-"}컨텐츠가 길수록 엄청난 계산을 하겟구나..
더 좋은방법이 있는지 생각해봐야겠다.
+ body태그 없이 내려오진 않겠지..?
+ 함수의 변형은 없을예정이니, 함수로 빼고 useMemo를 써주는 편이 좋겠다.
반응형
'[Develop] 개발공부 > FE - 프론트엔드' 카테고리의 다른 글
| [LV1] 체육복 (0) | 2022.11.23 |
|---|---|
| [LV1] 문자열 내 마음대로 정렬하기 (0) | 2022.11.21 |
| [LV1] 기사단원의 무기 (0) | 2022.11.21 |
| [LV1] 옹알이2 / while() (0) | 2022.11.15 |
| [LV1] 콜라 문제 / 수학적 계산이 전부인 while() (0) | 2022.11.15 |