리액트(react)에서 innerHTML을 사용하는 특별한 방법

특정 문자열을 볼드 처리 하는 방안을 테스트해보던 중 innerHTML이 react는 조금 다른 방식으로 써야 한 다는 것을 알게되었다.

 

✔️ 리액트 공식문서

---

dangerouslySetInnerHTMLinnerHTML브라우저 DOM에서 사용하기 위한 React의 대체품입니다 . 일반적으로 코드에서 HTML을 설정하는 것은 실수로 사용자를 XSS(교차 사이트 스크립팅) 공격 에 노출시키기 쉽기 때문에 위험합니다 . 따라서 React에서 직접 HTML을 설정할 수 있지만 위험하다는 것을 스스로에게 상기시키기 위해 키 dangerouslySetInnerHTML와 함께 객체를 입력하고 전달해야 합니다 .

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

DOM Elements – React

 

✔️ 특정 문자열 관련 포스팅

---

https://hyermione.tistory.com/139

특정 문자열을 볼드, 하이라이트 등 강조 처리 하는 방법