SVG Generation 3/3

아래와 같은 것을 한번 만들어 보려고 합니다.

가장 쉬운 방법은 하나하나를 SVG 로 만들어서 뿌리면 된다고 했습니다.
서버 사이드에서 SVG generation 하는 방법도 알아봤고, 이에 대한 문제점이 트래픽이라는 점도 이야기를 했습니다.

이제 브라우저에서 자체적으로 해결하는 방법을 자바스크립트를 통해서 만들어 보았습니다.

이번엔 React 인데, 2편만 이해하면 정말 쉽습니다.

SVG 를 만드는 Functional component 를 만들자.

Class Component 대신 Functional Component 를 만드는게 좋을 것 같습니다.
이미 2편에서 만든 것을 가져다가 살짝 고쳐 봅니다.
React 에서는 Template Literal 가 필요없으니, 직접 Tag 를 직접 쓰고 size 에서 큰따옴표를 없애면 끝
Vanilla JS 에서는 HTML Tag 가 달린 컴포넌트를 다루지 않으니 문자열로 리턴을 했지만,
이제는 직접 컴포넌트를 리턴합니다. (이점이 참 마음에 듭니다)
font-size 를 fontSize 로 써야 하지만 (-를 쓰지 않고 CamelCase 를 사용) 일단 동작하니 넘어갑니다.

function Circle(props) {
  const { size, color, text } = props
  return (
    < svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 44 44">
      <circle cx="22" cy="22" r="20" stroke="white" stroke-width="2" fill={color ? color : "black"} />
      <text id="val" font-size={size} fill="white" font-family="Verdana" text-anchor="middle" alignment-baseline="baseline" x="22" y="34.4"> {text} </text>
    </svg>
  )
}

img src 로 넣어 보자.

사실 위의 방식으로 SVG React Component 를 만들어 놓으면 이걸 어떻게 src 에 구겨 넣을까 생각하기 마련입니다.
제가 알아 본 방법으로는 이 방법은 불가능합니다.
혹씨 가능한 방법을 아시면 알려주십시오.
< img src='<Circle ... />' /> 는 안되는 것 같습니다. ㅠ.ㅠ

어떻게 하면 될까요?
그냥 2편에서 했던거 쓰면 됩니다.
data:image/svg+xml;utf8, 앞에 넣는 문자열을 리턴하는 자바스크립트 함수

소스를 확인하시려면 링크를 참고하세요. https://codesandbox.io/s/0om38vzm0

온라인 에디터 환경을 바꾸었습니다.
jsFiddle.net 에서는 react 환경에서 오류가 있어 codesandbox.io 로 넘어왔는데 괜찮군요.

React 를 쓰다가 보면, 뭔가 보여지는 것을 만드려고 하면
Component 를 상속받아서 사용하는 경우가 많습니다.
이렇게 해서 잘 안될 때는 일반 함수를 만들거나 일반 클래스를 만드는 것이 더 나을 때가 있습니다.

즐거운 코딩 되십시오.