React HTML string JSX render

기존에 HTML로 구성된 변수

const render = <p>안녕하세요</p>

render를 react 내에 JSX로 렌더링을 하는 방법을 몰랐다가 이번에 알게되어 포스팅 합니다.

기존에 변수에 값을 담아서 렌더링을 해주려고 해도 모르는 상태이기에

컴포넌트를 하나 만들거나 , 함수로 하나 만들어서 전달해줬습니다

function Component() {
  function Render(props){
      return (
          <p>{props.text}</p>
      )
  }

  //... JSX
  return (
  	<Render text="안녕하세요"/>
  )
}

// 안녕하세요

이런식으로 function에 값을 넘겨주고 function 안에서 조정해주는 복잡한 절차를 밟아야 했다.

구글링으로 찾아도 잘 안나와서 그냥 기존에 이 방법을 계속 사용하고 있었는데 이번에 개발자 커뮤니티에서 글을 하나 보았다.

나처럼 변수에 JSX 값을 저장해서 렌더링 해주는 것을 어떻게 해야되는지에 대한 질문이였는데

답장으로 Stack Overflow 글 하나를 보았다.

방법은 그냥 변수에 똑같이 JSX 문법의 값을 할당해주고 렌더링시 처리방법을 다르게 하는것이였다

function Component() {
  const render = "<p>안녕하세요</p>"

  //... JSX
  return (
  	<div dangerouslySetInnerHTML={{__html: render}}> </div>
  )
}

간단하게 div 속성에서 dangerouslySetInnerHTML으로 적용시키는것

좀 더 찾아봤으면 복잡한 함수로 받아오는 과정을 사용하지 않았을텐데 조금 아쉽다.

좀 더 유연한 코딩이 될것같다 !!

출처 : 스택오버플로우