React 앱에서 태그 요소에 텍스트나 문자열을 사용하여 html을 생성, 추가하는 방법을 알아보려고 합니다. 어떻게 하면 될까요?


# React에서 html 텍스트를 추가하기
자바스크립트는 DOM에 innerHTML을 사용할 수 있습니다. innerHTML은 html 코드의 문자열, 텍스트를 사용하여 DOM 하위에 새로운 html 태그 등을 생성 및 추가 할 수 있죠. 예를들어 아래와 같이 비어있는 p에 innerHTML을 사용하여 DOM을 추가하는 것이 가능합니다.
<p></p>

<script>
  const pTag = document.querySelector('p');
  const greeting = 'Hello! <span>WEBISFREE.com</span>';
  pTag.innerHTML = greeting;
</script>

위의 코드를 실행하면 아래와 같이 p태그 내부에 html이 생성됩니다.
<p>
  Hello! <span>WEBISFREE.com</span>
</p>

비어있는 p 태그는 하위에 새로운 span 태그와 TextNode를 가지게 됩니다. 여기까지 방법은 자바스크립트를 사용한 방법이었습니다. 만약 React에서 위와 같이 p 태그 내부에 적용하여 html을 생성하려면 어떻게 할까요?


! React에서 dangerouslySetInnerHTML를 사용하기
이때  dangerouslySetInnerHTML를 사용하여 구현할 수 있습니다. 아래는 react에서 구현한 방법입니다.
const greeting = 'Hello! <span>WEBISFREE.com</span>';

return (
  <p dangerouslySetInnerHTML={{__html: greeting }}></p>
)

방법은 비슷합니다. 다만 직접 표현식등을 사용하지 않고 대신에 dangerouslySetInnerHTML를 사용하여 추가하여야 합니다. 즉 아래와 같이 사용하면 동작하지 않습니다. 반드시 위와 같은 dangerouslySetInnerHTML를  사용해야만 html을 텍스트 형태로 태그 안에 추가할 수 있습니다.


@ 대부분의 프론트엔드도 비슷한 방법을 사용
이처럼 html 코드를 스크립트에서 텍스트로 직접 사용하는 방법은 대부분의 프론트엔드에서 동작하지 않는데요 ~ 일반적으로 프론트엔드 프레임워크는 해킹 등의 위험이 존재하기 때문에 react와 비슷하게  dangerouslySetInnerHTML와 같은 방법들을 사용해야 합니다. 참고로 XSS(Cross-site Script)를 사용한 해킹의 위험을 피하기 위한 목적이 가장 큽니다.


여기까지 react앱에 텍스트를 사용하여 html 코드를 렌더링하는 방법에 대하여 알아보았습니다. 아래는 관련 링크입니다.


(관련링크) React 공식 웹 사이트 바로가기 >
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml