TL; DR(요약)

element의 property에 아래 코드를 넣어주면 된다

dangerouslySetInnerHTML={{ __html: ${사용하고자 하는 html element의 string}}}

• 예시 코드

<Button
	key={secondIdx}
	id="btn1"
	dangerouslySetInnerHTML={{ __html: Key }} 
    // Key = '<h1> hello world </h1>'
/>

의문의 발단

리액트는 가상 DOM을 조작하는 것이지 DOM 자체를 조작하는 것이 아니다.
그런데 JS 문법인 element.innerHTML 은 DOM에 바로 HTML을 추가하는 것이기에 어떻게 하는 것인 지 한참을 헤맸다.

의문의 전개

내가 작성하려는 코드는 props로 string으로 작성된 html element 자체를 넘기는 것이었다.
그래서 name을 key로 해서도 넘겨보고, 다른 key를 설정해서도 넘겨봤는데 안됐다.

• 안됐던 이유는 내가 기존 코드를 활용해서 코딩을 해야 했기 때문이다. 기존의 element를 유지한 채로 내 코드를 이식해야 했다.

의문의 위기

결국 알아내지 못하고 이 부분을 의문으로 남겨둔 채 3일이 지났다.

의문의 절정

React 기본서를 보다가 리액트는 가상 DOM을 다룬다는 것을 알게 되었다. 그렇다면 innerHTML은 쓰지 못하는 건데, "리액트만의 innerHTML이 존재하나?" 라는 생각이 들었고 검색해봤다.

의문의 결말

내 가설이 맞았다.