[포트폴리오 만들기]dangerouslySetInnerHTML

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
https://betterprogramming.pub/what-is-dangerouslysetinnerhtml-6d6a98cbc187

🔆 \n으로 구성되있는 문자열을 React의 돔요소에 text로 넣기

// 1. \n을 모두 <br/>로 대체한 문자열을 만든다.
const lineBreaking = (title: string) => {
  return title.replace("\n", "<br/>"); // "원만한 대화를 통한<br/>의견 조율"
};

// 2. dangerouslySetInnerHTML을 이용하여 dom요소에 text를 넣는다.
return(
 <button type="button"
      dangerouslySetInnerHTML={{__html: lineBreaking("원만한 대화를 통한\n의견 조율")}}>
  </button>
)

🔆 dangerouslySetInnerHTML에 대해서

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법이다.

일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험하다.(XSS.로스 사이트 스크립팅)

따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야한다.

🔆 질문 : innerHTML와 다른점은?

dangerouslySetInnerHTML와 innerHTML는 동일한 결과가 나온다.

그러나 dangerouslySetInnerHTML을 사용하면 virtual dom을 통해 변경된 내용을 자동으로 리렌더링 해준다.

하지만 innerHTML을 사용하면 React는 DOM 노드가 수정되었음을 알 수 있는 방법이 없다.