Vue render 함수에서 innerHTML 사용하는 방법 (How to use v-html in JSX)

Vue render 함수에서 innerHTML 사용하는 방법 (How to use v-html in JSX)

일반적으로 React에서는 dangerouslySetInnerHTML, Vue에서는 v-html을 활용해서 innerHTML 처리를 합니다. 하지만 일반적인 방식이 아닌 렌더 함수(Render Function)를 사용하는 경우도 있는데요. 이때는 아래와 같이 처리하면 굉장히 간편하게 처리할 수 있습니다.

예시

this.$alert({
  content: (h) => h('div', { domProps: { innerHTML: err.message } })
})

좀 더 축약된 방식은 아래와 같습니다.

domPropsInnerHTML 활용한 방법

this.$alert({
  content: () => {
    return <p domPropsInnerHTML={'hello'} />
    // return <p domPropsInnerHTML={err.message} />
  }
})

export default {
  name: "app",
  data() {
    return {
      msg: '테스트 테스트!'
    }
  },
  render() {
    return (
      <h1 domPropsInnerHTML={this.msg}></h1>
    );
  }
};