[❗️Error] 12/10 최우철 JSX를 to HTML DOM 객체로 전환하기

### 마주친 에러에 대한 설명
- 에러라기 보단 리펙토링과 관계있는 내용이지만, 팀원분들 가운데 지도 위에 띄워야 하는 오버레이를 작성해야하는데 이게 Dom 객체를 받다보니 jsx를 적용할 수 없어서 어쩔 수 없이 dom객체를 수동으로 작성하는 불편함을 호소하고 계셨다.

> 하나의 팝업을 위해 들어가야 하는 고통스러운 Dom객체 작업 공유물

---

### 해결하기 위한 노력과 방안

- 그래서 곰곰히 생각해보다가 카카오가 content로 받아들이는 것이 Dom객체나 markup string이므로 jsx를 그 형태로 전환하면 되지 않을까 하는 의문점이 들어 여러모로 확인을 해 보았다.
- 거기에 styled component 마저 적용할 수 있으면 금상첨화이지 않을까 하였다.
- styled component의 구현원리를 살펴보면, 컴포넌트를 만들 때마다 prop과 className, 그리고 template literal 배열정보를 전달받은 후, 그것을 분해하여 tag와 content로 확인한 뒤, 새롭게 jsx 컴포넌트로 재구성하여 리랜더링을 위한 컴포넌트 확인용 랜덤 클래스네임을 부여하며 리턴하는 것을 알 수 있었다
- 그렇다면, 결국 styled 컴포넌트가 리턴하는 것도 역시 jsx 이므로, jsx 를 변환시키는 "무언가" 가 존재하면 되겠다는 생각이 들었고 스텍오버플로우의 답변을 볼 수 있었다

- 즉, ReactDOMServer 라는 객체의 renderToStaticMarkup 는 리엑트가 제공해주고 있고, 이것을 통해 jsx 객체를 자동으로 markup 형태의 구조로 전환해준다는 것을 알 수 있었다.

- 그렇다면 남은 것은 저 메소드 안에다가 jsx 객체만 넣어주면 되는 것이었고

- 실제로 콘솔을 찍어보면 markup 스트링이 리턴되는 것을 볼 수 있었다

- 결과는 성공적이었다

---

### 추신
후에 팀원분이 연락하기를 이게 plainText이기때문에 onClick이벤트가 먹히지 않는다고 한다. 그래서 이벤트를 등록할 방법을
찾아보았고

해당 내용에 따르면, innerHTML으로 plain markup으로 이루어진 html 스트링을 넣어주면 된다고 한다.
따라서

```js
const wrapper= document.createElement('div');
wrapper.innerHTML= 'customOverlayHTML';
const component = wrapper.firstChild;

const closeBtn = component.querySelector(".close-button");
closeBtn.addEventListner("click", () =>{
console.log("work");
}
```

해당 코드를 통해 HTML markUp을 일단 Dom객체로 전환시킨 후 => 이벤트를 등록하도록 진행하였다.

> 덕택에 jsx와 dom 객체의 차이를 일면이라도 공부할 수 있는 귀중한 경험이 되었다

---

### 레퍼런스
[styled component 의 구조](https://john015.netlify.app/styled-components%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%A0%EA%B9%8C)

[parse to markup](https://stackoverflow.com/questions/39308011/convert-react-jsx-object-to-html)

[parse to html](https://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements)