react Swiper custom renderBullet

Swiper는 slide 또는 carousel 을 표현하는 UI 라이브러리이다

• https://www.npmjs.com/package/swiper

react에서 swiper로 custom pagination 버튼을 만들고 싶은 경우
공식 문서 예제는 아래와 같이 string으로 html을 표현하는 것을 보여준다

export default function App() {
  const pagination = {
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    },
    dynamicBullets: true,
  };

• https://codesandbox.io/p/sandbox/swiper-react-pagination-custom-forked-db0zyr?file=%2Fsrc%2FApp.jsx&selection=%5B%7B%22endColumn%22%3A5%2C%22endLineNumber%22%3A21%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A14%7D%5D

그런데 react 컴포넌트를 사용하고 싶다면 아래와 같이 사용할 수 있다

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

 const pagination = {
    clickable: true,
    renderBullet: function (index, className) {
      return ReactDOMServer.renderToStaticMarkup(<div className={className}>This renderToStaticMarkup will convert your JSX into html</div>);
    },
  };

• https://github.com/nolimits4web/swiper/discussions/5295#discussioncomment-3354594

• 다음 포스팅 : react-dom/server