리액트에서 innerHtml 하는법

ex) I #love you 를 I <mark>love</mark> you 로 변환해주는 코드

1) sanitize-html

const cleanedPayload = sanitizeHtml(
    payload.replace(/#[\w]+/g, "<mark>$&</mark>"),
    {
      allowedTags: ["mark"],
    }
  );

allowedTags로 허용된 태그로만 변환가능하다

<CommentCaption
        dangerouslySetInnerHTML={{
          __html: cleanedPayload,
        }}
      />

2) React.Fragment

<CommentCaption>
        {payload.split(" ").map((word, index) =>
          /#[\w]+/.test(word) ? (
            <React.Fragment key={index}>
              <Link to={`/hashtags/${word}`}>{word}</Link>{" "}
            </React.Fragment>
          ) : (
            <React.Fragment key={index}>{word} </React.Fragment>
          )
        )}
      </CommentCaption>

정규표현식.test()로 통과 되는것은 link to도 줄 수 있다.

<></>도 쓸 수 있으나 map안에서 쓰려면 key를 줘야하는 React.Fragment를 사용한다.