반응형
아웃룩이 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를 써주는 편이 좋겠다.
반응형
'[IT] 프로덕트 개발 > React - 리액트' 카테고리의 다른 글
| [React Hook] useMemo를 알아보자 (0) | 2023.01.05 |
|---|---|
| Typescript IntrinsicAttributes Error (0) | 2023.01.03 |
| react-query 리액트쿼리를 알아보자 (useQuery, staleTime과 cacheTime) (0) | 2022.10.15 |
| React Router v6 설정하기 / match param, protectedRoute (0) | 2022.10.12 |
| [React] localStorage 사용하여 Todo list 만들기 (0) | 2022.09.15 |