String으로 tag를 다 만들어서 컴포넌트에 넣고 싶은데, 왜 태그 인식이 안될까요,,, 에서 시작되었다. 호출할 컴포넌트에 String으로 넣어주면 알아서 될 줄 알았건만.. 변환이 안되어서 innterHTML도 써보고 여러가지 해봤는데 리액트는 기본적으로 innterHTML 자체를 인식하지 못한다고 한다.
그러면 뭘 인식하져? 라고하면 아래의 글을 읽으면 됩니다 :-)
dangerouslySetInnerHTML 이라는 걸 태그 내부에 설정해주면 된다.
/** ------------------------------------------------
* String 으로 받은 메세지 내부 html 형식으로 변환 *
* ------------------------------------------------*/
setDetails(){
return {__html: `${this.message}`};
}
@computed
get showDetails(){
return(
<div dangerouslySetInnerHTML={this.setDetails()} />
);
}
import React, {Component} from 'react';
import {inject, observer} from "mobx-react";
@inject(stores => ({
store: stores.Store;
}))
@observer
class Table extends Component{
render(){
return(
<div>
<div>
{store.showDetails}
</div>
</div>
);
}
}
export default Table;
왜 컴포넌트에서 store.showDetails 라고 하죠? 뒤에 () 를 왜 안쓰져..? 라고 하면 렌더링 하기 전부터 주입되어있는 상태라 가능함..으로 이해했다.(아니면 알려주세요) () 로 쓰면 function으로 인식되고, 내 기억상 에러가 났던 걸로 기억됨. 그리고 다른 메세지를 클릭해도 처음 클릭한 메세지가 계속 떠서 렌더링이 안되었다.
이거 써보고 저거 써보고,, 완전히 이해하고 쓰는게 아니라 일단 돌아가게 구글신의 도움을 받아 만들고 있어서 세련되지 못하다는 점.