리액트 점진적으로(일부만) 도입하기 (제이쿼리와 함께 쓸수 있을까?): ReactDOMServer

TLDR : ReactDOMServer을 사용하면 리액트를 일부분만 string으로 변환하여 도입, 사용할 수 있다.

현재 프로젝트에서 해당 라이브러리를 사용하고 있습니다.

https://nhn.github.io/tui.calendar/latest/

https://nhn.github.io/tui.calendar/latest/

해당 라이브러리는 React Wrapper도 존재하는데, 내부 상태 관리는 클래스, 탬플릿 및 스타일 요소는 js 객체 / 마크업 스트링으로 되어있습니다.

즉, 탬플릿에 리액트 컴포넌트를 쓸 수 없습니다...

... SVG 아이콘을 컴포넌트화 해뒀는데, 이걸 사용할 수 없을까요...?

 

찾아보니 이런게 있었습니다.

https://reactjs.org/docs/react-dom-server.html

ReactDOMServer – React

리액트 돔 서버...? 서버에서만 쓸 수 있는거 아니에요?

ReactDOMServer 객체를 사용하면 컴포넌트를 정적 마크업으로 렌더링할 수 있습니다. 일반적으로 노드 서버에서 사용됩니다.

브라우저 환경에서 사용할 수 있는 세 가지 API가 있다.

• renderToReadableStream()
• renderToString()
• renderToStaticMarkup()

딱봐도 맨 위는 SSR에나 쓸만한 거고, 우리는 renderToString 이거 하나만 살펴봅시다.

ReactDOMServer.renderToString(element)

요건 이렇게 사용합니다.

import * as ReactDOMServer from "react-dom/server";

const Test = () => <h1>hello world!</h1>;
const test = ReactDOMServer.renderToString(<Test />);
test==='<h1>hello world!</h1>' // true

해당 API와 함께라면 제이쿼리와 함께 리액트를 쓸 수 있겠네요 ㅎㅎ