TLDR : ReactDOMServer을 사용하면 리액트를 일부분만 string으로 변환하여 도입, 사용할 수 있다.
현재 프로젝트에서 해당 라이브러리를 사용하고 있습니다.
https://nhn.github.io/tui.calendar/latest/
https://nhn.github.io/tui.calendar/latest/
A JavaScript calendar that is full featured. Now your service just got the customizable calendar. 🚩 Table of Contents 📙 Documents Collect statistics on the use of open source TOAST UI Calendar applies Google Analytics (GA) to collect statistics on th
nhn.github.io
해당 라이브러리는 React Wrapper도 존재하는데, 내부 상태 관리는 클래스, 탬플릿 및 스타일 요소는 js 객체 / 마크업 스트링으로 되어있습니다.
즉, 탬플릿에 리액트 컴포넌트를 쓸 수 없습니다...
... SVG 아이콘을 컴포넌트화 해뒀는데, 이걸 사용할 수 없을까요...?
찾아보니 이런게 있었습니다.
https://reactjs.org/docs/react-dom-server.html
ReactDOMServer – React
A JavaScript library for building user interfaces
reactjs.org
리액트 돔 서버...? 서버에서만 쓸 수 있는거 아니에요?
ReactDOMServer 객체를 사용하면 컴포넌트를 정적 마크업으로 렌더링할 수 있습니다. 일반적으로 노드 서버에서 사용됩니다.
브라우저 환경에서 사용할 수 있는 세 가지 API가 있다.
딱봐도 맨 위는 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와 함께라면 제이쿼리와 함께 리액트를 쓸 수 있겠네요 ㅎㅎ
'FrontEnd' 카테고리의 다른 글
리액트 컴포넌트의 응집도를 관리하는 방법 (0) | 2022.07.30 |
---|---|
리액트 Concurrent UI Pattern - Scheduling in React (0) | 2022.07.30 |
타입스크립트 : React.FC는 그만! children 타이핑 올바르게 하기 (0) | 2022.07.24 |
리액트 테스트 : Context API 테스트와 커스텀 렌더 함수 사용하기 (0) | 2022.07.23 |
[짤막글] 언제 context API를 사용하고 언제 zustand나 redux를 사용할까요? (0) | 2022.07.23 |