react 에서 하드 코딩을 줄이기 위해서 서버에서 HTML 태그를 포함하여 주는 것을 뿌리게 되었다. 어떻게 적용하면 좋을까 싶어서 검색해봤는데
javascript 일 경우에는
const parser = new DOMParser();
const dom = parser.parseFromString(HTMLdata, "text/html");이런 식으로 변환을 해서 사용하면 된다. 원하는 값을 html 태그로 변환 하여 줬는데
document 식으로 전체 코드를 주기 때문에 필요한 값을 얻기 위해서는
dom.body.innerHTML이렇게 접근해야지 원하는 값을 얻을 수 있다.
react 일경우
react 에서는 자체적으로 옵션 값을 줄수 있는데 위험하다 보니
이름 자체가 “위험”이란 단어가 들어간다
옵션으로 dangerouslySetInnerHTML 값으로 __html : data 형식으로 사용하면된다 .
div로 예시를 주자면
<div dangerouslySetInnerHTML = {{__html:data}} /> 이런 식으로 사용하면된다.
이런 식으로 코드를 작성하고 뿌려주게 되었다.
하지만 style 태그가 먹히지 않는 것이었다??
문제 직면
백엔드와 소통하여 style이 필요한 값이 있어서 리액트는 style 옵션은 콧수염 태그 ({}) 를 두겹 쌓아서 주면 된다 라고 전해줬는데
뿌려주고 나니 style 태그가 먹히지 않는 것이었다.
이유가 뭔가 찾아보니
나는 함수로 코드를 작성해서 함수를 실행해서 코드를 뿌려줬었는데
style 태그를 줄때 Dom 에서 바로 사용되는 것처럼 style을 주면 되었다.
기존 : <div style ={{color:’blue’}} > 내용 </div>
이런식으로 줬었는데
스타일 태그가 안먹혔다.
수정
<div style= “color:blue”> 내용</div>이렇게 수정하니 먹혔다.
JSX로 변환하지 않고 바로 DOM 에서 쓰이도록 수정하니 먹히게 되었다.
함수로 작업해서 그런지 컴파일이 작동되지 않아서 그대로 사용할수 있는 것 같은 모양이다.
