rechart에서 label을 사용하면 bar 차트에서 차트에 대한 정보를 보이게 설정해줄수 있다.
기본 label 컴포넌트를 활용하던가 아니면 차트 내부 label 옵션을 활용하면 라벨을 쉽게 사용할수 있는데
나의 경우에는 바 차트의 이름 + 차트의 점수 + 차트의 로고 가 같이 보여야 하는 것을 만들어야 했다.
이를 위해서 label을 커스텀 해야 했는데 검색을 해보니 공식문서도 그렇고 모든 사람들의 예시가
string값을전달해서 string값을 리턴 하는 것이었다.
나도 테스트를 위해서 커스텀을 활용했는데 flex 같은 스타일을 주기 위해서 div태그 , h1 태그 ,img 태그를 사용했는데
렌더링 할때 값이 나오지 않는 문제가 있었다.
구글링좀 하다가 해결이 안되는것 같아서 GPT에게 물어보니 foreienObject를 써야 한다고 했다.
커스텀으로 foreingObject 태그안에 html 태그를 넣고 렌더링 하는 방법이었다.
foreignObject
foreignObject 에 대해서 처음들어봐서 검색하게 되었다 MDN에 있는 것을 보고 해석을 하게 되었는데
foreignObject 태그는 SVG가 다른 XML 이름을 가진 엘리먼트를 포함하게 하는 방법이라고 하는 것 같았다.
XML은 무엇인가 ??
eXtensible Markup Language의 약자이다. XML은 정보 전달을 위해서 사용되는 것이고 HTML은 문서 전달에 초점이 맞춰진 태그 이다.
XML은 텍스트 형식으로 데이터를 저장해서 빠르고 데이터 손실없이 정보 전달이 가능하다.
HTML은 표준 태그들이 미리 정의 되어 있다 div, a , p 태그 등등
하지만 XML은 태그가 정의되어 있지 않아서 태그와 문서구조를 모두 정의를 해줘야 한다고 한다.
XML Namespace
앞에서 말했듯이 미리 정의된 태그가 없어서 개발자가 태그 이름을 정해주는데 충돌이 일어날수가 있어서 xlmns 옵션을 줘서 이름을 정해줄 수가 있다. 고유한 이름이라고 볼수 있는데 html5 가 나오고 나서는 필수 옵션이 아니게 되었다.
이 방법을 활용해서 라벨 태그에 태그를 넣는 방법을 사용하게 되었다.
const CustomLabel = ({ x, y, width, height, value }) =>
{ return
( <foreignObject x={x} y={y - 20} width={width} height={height}>
<div xmlns="http://www.w3.org/1999/xhtml" style={{ fontSize: '12px', background: 'white', borderRadius: '5px', padding: '2px', textAlign: 'center' }}>
{value}
</div>
</foreignObject> ); };xmlns 을 넣어주었는데 typescript상에서 오류가 나서 어쩔수 없이 xmlns 옵션을 삭제해주었다.
이렇게 하고 원하는 태그를 넣어주니 원하던 방법대로 작동이 되었다.
이렇게 쓰면 단점이 있을것이라 생각되었는데 지원되는 브라우져가 한정적인게 단점이라고 한다.
이를 유의해서 사용하면 될것 같다.
